Question

什么是批准的方法来创建反应中的选择元素，这是与包含组件的选择的支柱双向约束？默认选择应该是prop的当前属性（可以生成，因为该值是任意的，并且在选择时prop属性应该反映选择。此外，应该可以将值直接写入选择字段。< / p>

Answer 1

没有＆＃34;批准＆＃34;这样的方式，但你应该注意几件事：

在元素上触发更改事件，而不是元素。
Controlled and uncontrolled components defaultValue are set differently

这是受控下拉菜单的一般示例

var MyDropdown = React.createClass({
     getInitialState: function() {
         return {
             value: 'select'
         }
     },
     change: function(event){
         this.setState({value: event.target.value});
     },
     render: function(){
        return(
           <div>
               <select id="fruit" onChange={this.change} value={this.state.value}>
                  <option value="select">Select</option>
                  <option value="Apples">Apples</option>
                  <option value="Mangoes">Mangoes</option>
               </select>
               <p></p>
               <p>{this.state.value}</p>
           </div>
        );
     }
});

React.render(<MyDropdown />, document.body);

这里是working demo。

Answer 2

我将选项添加到状态数组上，然后映射它们，尝试此代码

import React, { Component } from 'react'

class SelectExample extends Component {
  constructor() {
    super()
    this.state = {
      options: ['One', 'Tow', 'Three'],
      selectedOption: 'One',
    }
  }

  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value,
    })
  }

  render() {
    return (
      <select name='selectedOption' onChange={this.handleChange}>
        {this.state.options.map(i => i == this.state.selectedOption ? (
        <option value={i} selected>
          {i}
        </option>
        ) : (<option value={i}>{i}</option>) )}
      </select>
    )
  }
}

如何在React中双向绑定select元素和prop

2 个答案: