Как я могу сделать, чтобы показать три параметра, когда я нажимаю на выбор с помощью react.js ?

#javascript #html #reactjs

#javascript #HTML #reactjs

Вопрос:

У меня есть выбор, такой как :

 <Select id='1' list={[...this.state.dictionnary]}/>

где this.state.dictionnary это так :

 state = {
        dictionnary: [
            {value: "a", name: "ab"},
        ]}

И выбор компонента выглядит следующим образом :

 class Select extends Component {

    handleChange()
    {
        // I would like to show 1, a and ab
        // 1 is the id of the select
        // a and ab are value and name of 
  };
    render() {
        return (
            <select onChange={this.handleChange} className="custom-select">{this.props.list.map(option => (
                <option key={option.value} value={option.value}>{option.name}</option>))}
            </select>
        )
    }
}

export default Select;

Я хотел бы показать некоторую информацию, используя handleChange() функцию, такую как идентификатор, имя и значение.

Не могли бы вы мне помочь, пожалуйста?

Большое вам спасибо

Ответ №1:

Вы должны изменить параметр, чтобы значение имело весь объект, чтобы получить его позже в handleChange. Кроме того, для доступа к тому же this с реквизитами в методе handleChange вам необходимо использовать функцию со стрелкой:

 <select onChange={(e) => this.handleChange} className="custom-select">
    {this.props.list.map((option) => (
      <option key={option.value} value={option}>
        {option.name}
      </option>
    ))}
</select>

По умолчанию обработчик onChange получает параметр события, чтобы вы могли получить цель и реквизиты:

 handleChange(event) {
    const { value, name } = event.target.value;
    console.log(this.props.id, value, name);
}

1. спасибо, но я не могу получить идентификатор, используя this.props.id :/

2. Не this определено внутри handleChange? Если это так, используйте функцию со стрелкой onChange={(e) => this.handleChange(e)} , например. Если это сработает, я изменю ответ.

Ответ №2:

Добавление к ответу @Alavaro необходимо split после получения значения для удаленного ,

  handleChange = e => {
    const [value, name] = e.target.value.split(',')
    console.log({ id: this.props.id, value, name})
  }
  render() {
    return (
      <select onChange={this.handleChange} className="custom-select">
        {this.props.list.map((option, index) => (
          <option key={option.value} value={[option.value, option.name]} >
            { option.name }
          </option>
        ))}
      </select>
    );
  }
}