React中的事件处理程序

时间:2017-05-11 13:11:58

标签: javascript reactjs functional-programming currying

我正在尝试在Component上编写一个(curried?)onChange事件处理程序,它将接收一个key参数,该参数将让它知道要更新的状态对象中的哪个键。代码不会编译,说'key' is not defined

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: null,
      lastName: null
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = (key) = (event) => {
    console.log(key, event);
  }

  render() {
    return (
      <div>

        <form>
          <input onChange={this.handleChange('firstName')} value={this.state.firstName} />
          <input onChange={this.handleChange('lastName')} value={this.state.firstName} />
        </form>

        {JSON.stringify(this.state, null, 4)}
      </div>
    );
  }
}

2 个答案:

答案 0 :(得分:3)

您必须在event处理程序上同时传递keyOnChange

这样做

<input onChange={this.handleChange.bind(this,'firstName')} value={this.state.firstName} />

onChange应为

 handleChange = (key, event) => {
    console.log(key, event);
  }

这将允许传递eventkey,并且该功能将起作用。

答案 1 :(得分:1)

我认为在您的代码中,您只是忘记在初始化第一个函数名称之后放下箭头函数:

handleChange = (key) = [!!! HERE - should be an arrow !!!] (event) => {
  console.log(key, event);
}

尝试使用此:

handleChange = (key) => (event) => {
  console.log(key, event);
}

这样,您的第一个具有参数key的函数将返回另一个具有参数event的函数。