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

Question

我正在努力创建一个 "translates" 数字的 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 {
  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>

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

REACT: Translator Component | Setting & Accessing State

javascript

reactjs

react-component

react-state-management

react-state