Question

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

我已经尝试了

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：无法读取属性＆＃39; target＆＃39;未定义的。

这是我的完整代码：

  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>

Answer 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;

Answer 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>
)

这可能会这样做，很难在不运行的情况下进行检查，但取消对handleChange中renderData()功能的调用会有所帮助，并且会查看您的数据名称'维生素'/'营养素'会帮助

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

2 个答案: