O problema é como você está fazendo, código sem necessidade e variaveis com mesmo nome fazendo coisas diferentes, para simplificar eu montei um exemplo minimo:
class App extends React.Component {
constructor() {
super();
this.state = {
t1: 'a',
t2: 'b'
};
this.handlerOnChange =
this.handlerOnChange.bind(this);
}
handlerOnChange(e) {
const {name, value} = e.target;
this.setState({[name]: value});
}
render() {
const {t1, t2} = this.state;
return (
<div>
<div>
<input type="text" name="t1" value={t1} onChange={this.handlerOnChange} /> {t1}
</div>
<div>
<textarea name="t2" value={t2} onChange={this.handlerOnChange}/> {t2}
</div>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Percebe que tanto o input
e o textarea
compartilham do mesmo método de alteração e nesse caso não pode esquecer de colocar o mesmo nome das tags html com os da variáveis do javascript.