O problema é como você está fazendo, código sem necessidade e várias com mesmo nome fazendo coisas diferentes, para simplificar eu montei um exemplo minimo:

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

    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'));

<!-- language: lang-html -->

    <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>

<!-- end snippet -->