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

【问题标题】：REACT: Translator Component | Setting & Accessing StateREACT：翻译组件 |设置和访问状态
【发布时间】：2020-07-17 15:49:01
【问题描述】：

我正在创建一个 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' />

【问题讨论】：

顺便说一句，一旦方法被修复或与 handleChange 结合，我将不得不更改我的
标签内的内容。
这里是我的一支笔的链接，它以类似的方式运作，确实有效：codepen.io/adamjschork/pen/QWbPeOV

标签： javascript reactjs react-component react-state-management react-state

【解决方案1】：

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

【讨论】：

美丽。谢谢！