Skip to main content
adicionou 205 caracteres ao conteúdo
Fonte Link
novic
  • 36,7mil
  • 4
  • 32
  • 70

O problema é como você está fazendo, código sem necessidade e váriasvariaveis 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 com os da variáveis do .

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:

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>

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 com os da variáveis do .

Fonte Link
novic
  • 36,7mil
  • 4
  • 32
  • 70

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:

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>