在 React 的函数中调用事件处理程序答案

【问题标题】：Calling an event handler within a function in React在 React 的函数中调用事件处理程序
【发布时间】：2018-05-22 15:50:39
【问题描述】：

我正在显示一个下拉选择菜单项，其中显示了维生素列表，但我希望它更新为用户选择的新维生素。

我试过了

renderData(handleChange) {
const {vitamins} = this.state.data;
return vitamins.map((micro, index) => {
  return (
    <option value="" key={index}>{micro.name}</option>
  )
})
}

这个不会改变状态。

和

renderData() {
this.handleChange();
const {vitamins} = this.state.data;
return vitamins.map((micro, index) => {
  return (
    <option value="" key={index}>{micro.name}</option>
  )
})

}

这个返回 TypeError: Cannot read property 'target' of undefined.

这是我的完整代码：

  constructor(props) {
   super(props);
   this.state = {
    value: '',
   data: data.nutrients,
 };

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

handleChange(e) {
  this.setState({
   value: e.target.value,
  });
}

renderData() {
  this.handleChange();
  const {vitamins} = this.state.data;
  return vitamins.map((micro, index) => {
    return (
     <option value="" key={index}>{micro.name}</option>
    )
 })
 }
  return (
    <form onSubmit={this.handleSubmit}>
      <label className="nutrient-label">
      Vitamins
      <select value={this.state.value} onChange={this.handleChange}>
        {this.renderData()}
      </select>
    </label>
  </form>

【问题讨论】：

您的错误是因为您在renderData 中调用handleChange，但您没有将e 传递给handleChange。所以它无法读取未定义的目标
@BrettEast 我不是在谈论onClick 处理程序。它里面的那个可以正常工作。查看renderData 函数的内部。该函数正在调用handleChange。如何将e 从renderData 传递到handleChange？

标签： reactjs function events ecmascript-6 callback

【解决方案1】：

Here you go..  Hope this helps :)

class SelectOptionComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
            data: [{
                label: 'Vitamin A', value: 'vitaminA'
            }, {
                label: 'Vitamin B', value: 'vitaminB'
            }, {
                label: 'Vitamin C', value: 'vitaminC'
            }],
        };
    }

    handleChange = (e) => {
        const { value } = e.target;
        this.setState({
            value: value
        });

        console.log('Selected Item', value)
    }

    renderData() {
        return this.state.data.map((item, index) =>{
            return <option value={item.value} key={index}>{item.label}</option>
        })
    }

    render() {
        return (
            <select value={this.state.value} onChange={this.handleChange}>
                {this.renderData()}
            </select>
        );
    }
}

export default SelectOptionComponent;

【讨论】：

【解决方案2】：

您的代码中有一些可能导致问题的错误：

  constructor(props) {
   super(props);
   this.state = {
    value: '',
   data: data.nutrients, // where is this coming from, you have no nutrients
   // I think this should be `data: vitamins` because you access it later
 };

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

handleChange(e) { // try using the setState function
  this.setState({
   value: e.target.value,
  });
}

// I would write like this:
handleChange(e) {
  const value = e.target.value
  this.setState(() => ({
   value
  }));
}

renderData() {
  this.handleChange(); // remove this line, you don't want to call this function here, and this function needs an argument
  const {vitamins} = this.state.data; // this is where you want vitamins again, not nutrients like you have set in the constructor
  return vitamins.map((micro, index) => {
    return (
     <option value="" key={index}>{micro.name}</option>
    )
 })
 }
  return (
    <form onSubmit={this.handleSubmit}>
      <label className="nutrient-label">
      Vitamins
      <select value={this.state.value} onChange={this.handleChange}>
        {this.renderData()}
      </select>
    </label>
  </form>
)

这可能会做到这一点，如果不运行它就很难检查，但删除对 renderData() 中的 handleChange 函数的调用会有所帮助，并且查看数据“维生素”/“营养素”的名称会有所帮助

【讨论】：