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

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

使用一个处理过的 function 和event就可以了

 class App 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); } handleChange(event) { this.setState({ input: event.target.value }); this.setState({ answer: this.state[event.target.value] }); } 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} /> <p>{this.state.input}</p> <p>{this.state.answer}</p> </div> ); } } 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>