REACT：翻译组件 | 设置和访问状态

Question

我正在创建一个 REACT 组件，该组件通过基本上获取用户的输入并使用简单的键值对访问翻译来“翻译”一个数字。除了我的 handleTranslate 方法外，一切正常。此方法的控制台日志给我未定义。

class MyComponent extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      input: '',

      one: 'uno',

      two: 'dos',

      three: 'tres',

      four: 'cuatro',

      five: 'cinco',

      six: 'seis',

      seven: 'siete',

      eight: 'ocho',

      nine: 'nueve',

      ten: 'diez',

      answer: ''

    };

    this.handleChange = this.handleChange.bind(this);

    this.handleTranslate = this.handleTranslate.bind(this);

  };

  

  handleChange(state) {

    this.setState({

      input: event.target.value

    });

  }

  handleTranslate (state) {

    var x = state.input;

    this.setState({

      answer: state.x

    });

  }

  

  render () {

  return(

  <div>

      <h3>Enter an English number between one and ten and watch the translation render below</h3>

      <input value={this.state.value} onChange={this.handleChange, this.handleTranslate}/>

      <p>{this.state.input}</p>

  </div>

  );

  }

};

ReactDOM.render(<MyComponent/>, document.getElementById('view'));

<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='view' />

Answer 1

使用一个处理函数event就可以了class App extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; input: "",&nbsp; &nbsp; &nbsp; one: "uno",&nbsp; &nbsp; &nbsp; two: "dos",&nbsp; &nbsp; &nbsp; three: "tres",&nbsp; &nbsp; &nbsp; four: "cuatro",&nbsp; &nbsp; &nbsp; five: "cinco",&nbsp; &nbsp; &nbsp; six: "seis",&nbsp; &nbsp; &nbsp; seven: "siete",&nbsp; &nbsp; &nbsp; eight: "ocho",&nbsp; &nbsp; &nbsp; nine: "nueve",&nbsp; &nbsp; &nbsp; ten: "diez",&nbsp; &nbsp; &nbsp; answer: ""&nbsp; &nbsp; };&nbsp; &nbsp; this.handleChange = this.handleChange.bind(this);&nbsp; }&nbsp; handleChange(event) {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; input: event.target.value&nbsp; &nbsp; });&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; answer: this.state[event.target.value]&nbsp; &nbsp; });&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Enter an English number between one and ten and watch the translation&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; render below&nbsp; &nbsp; &nbsp; &nbsp; </h3>&nbsp; &nbsp; &nbsp; &nbsp; <input value={this.state.value} onChange={this.handleChange} />&nbsp; &nbsp; &nbsp; &nbsp; <p>{this.state.input}</p>&nbsp; &nbsp; &nbsp; &nbsp; <p>{this.state.answer}</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}ReactDOM.render(<App />, document.getElementById("root"));<div id="root"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>