Вызов обработчика события внутри функции в React

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: Невозможно прочитать свойство 'target' из 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>

Answer 1

В вашем коде есть несколько ошибок, которые могут вызывать проблемы:

  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() поможет, и просмотр названий ваших данных 'витамины / питательные вещества' поможет

Answer 2

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;