Question

我有一个由其父级呈现的组件。根据作为道具传递的内容，存在一个选择字段，其中包含options的映射输出集。我想将id和对象的name都传回给父对象，该对象在选项return中被映射出来……请参见下文

let availableProgramNames = props.program_names.map(p => {
    return(
      <option one={p.id} two={p.name} className="universal-program-name">{p.name}</option>
    )
  })

我还尝试过类似value={[p.id, p.name]}的操作，然后在handleChange中运行拆分，这导致状态被正确更改，但是即使重新渲染{{ 1}}被发现已更新。那里没有线索...

props.new_program.name

Answer 1

这是另一种方法。

class App extends React.Component {
  state = {
    program_names: [
      { id: 1, name: "foo" },
      { id: 2, name: "bar" },
    ],
  }

  availableProgramNames = this.state.program_names.map(p => {
    return (
      <option key={p.id}>{p.name}</option>
    )
  })

  handleNameChange = (e) => {
    const { selectedIndex } = e.target.options;
    const {program_names} = this.state;
    const {name,id} = program_names[ selectedIndex -1 ];
    console.log(name,id);
  }

  render() {
    return (
      <div>
        <select onChange={this.handleNameChange}>
          <option>Please Choose a Name</option>
          {this.availableProgramNames}
        </select>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

我将亲自处理父组件中的此逻辑，但是您也可以为onChange事件创建一个回调函数，该事件根据控件的值查找所选选项。

const options = [
    {id: 1, name: 'bill'},
    {id: 2, name: 'sally'},
]

const handleChange = (e) => {
    const selectedOption = options.find(option => option.id === +e.target.value);
    props.handleNameChange(selectedOption);
}
return (
    <select onChange={handleChange}>
        {options.map((option, key) => (
            <option value={option.id} key={key}>{option.name}</option>
        ))}
    </select>
);

反应-将多个选项参数/值传递给onChange

2 个答案: