it-swarm.com.ru

React выбор опции с объектом в качестве значения атрибута

У меня есть проблема с реакцией, когда я хочу изменить выбранную опцию. Проблема в том, что значение является объектом, и я не могу передать его в атрибут значения параметра.

Смотрите следующий код:

class Selector extends React.Component {
  contructor(props) {
    super(props)
    this.state = { obj: null }
    this.handleChange = this.handleChange.bind(this)
  }

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

  render() {
    <select onChange={handleChange}>
     {this.props.listOption.map((option, index) => 
       <option key={index} value={option.obj}>
         {option.name}
       </option>
     )}
    </select>
  }
}

и с

<Selector option={[{name: "name", obj:{...}}, ...]}>

Мне нужно изменить состояние компонента со значением выбранного параметра. Что я получаю, когда состояние меняется "object Object". Я полагаю, это происходит потому, что реагировать не может встроить объект JavaScript в атрибуте окончательного просмотра. Я не ошибаюсь?

Более того, я установил obj в состояние как ноль в конструкторе. Есть ли правильный способ сделать это?

6
Frilox

Вы можете использовать index из options

class Selector extends React.Component {
  contructor(props) {
    super(props);
    this.state = { obj: null }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e) {
    this.setState({obj: this.props.listOption[e.target.value].obj})
  }

  render() {
    <select onChange={handleChange}>
     {this.props.listOption.map((option, index) =>
       <option key={index} value={index}>
        {option.name}
       </option>
      )}
    </select>
  }
}

Более того, я установил obj в состояние как ноль в конструкторе. Есть... правильный способ сделать это?

Я зависит от вашего требования. Если вы хотите показать хотя бы один вариант как выбранный, вы можете оставить его вместо null

13
Jyothi Babu Araja

Передайте объектную строку JSON как значение, а затем проанализируйте его.

handleChange(e) {
    let obj = JSON.parse(event.target.value); //object
  }

  render() {
    <select onChange={handleChange}>
     {this.props.listOption.map((option, index) => 
       <option key={index} 
         value={JSON.stringify(option)}> //pass object string as value
         {option.name}
       </option>
     )}
    </select>
  }
5
Sreeragh A R

Я предполагаю, что вы хотите, чтобы была выбрана только одна опция . Поэтому проще всего было бы установить selectedIndex . При использовании конструкции всегда думайте о типе значения . This.state = {selectedIndex: 0}

Теперь у вас есть состояние с объектом selectedIndex, который вначале равен 0.

В методе рендеринга вы можете просто проверить индекс:

{this.props.listOption.map((option, index) => {
    this.state.selectedIndex == index ? (
      <option key={index} value={option.obj} selected>option.name</option>
    ): (
      <option key={index} value={option.obj}>option.name</option>
    ))}

И на ручке изменить setState с помощью e.target.key. 

Возможно, я оставил синтаксические ошибки ... Хотя, надеюсь, это поможет.

2
Luke359