React JSX：在所选的<select>选项上选择“selected”

10 回答

• 0

  当你尝试设置 <option> 的"selected"属性时，你可以做React警告你的事情：

  在<select>上使用defaultValue或value props，而不是在<option>上设置选中 .

  因此，您可以在选择的 defaultValue 上使用 options.value

  回复于 2024-04-26T01:59:27+08:00
• 54

  ***Html:***
  <div id="divContainer"></div>
  
  var colors = [{ Name: 'Red' }, { Name: 'Green' }, { Name: 'Blue' }];
  var selectedColor = 'Green';
  
  ReactDOM.render(<Container></Container>, document.getElementById("divContainer"));
  
  var Container = React.createClass({
      render: function () {
          return (
          <div>            
              <DropDown data={colors} Selected={selectedColor}></DropDown>
          </div>);
      }
  });
  
  ***Option 1:***
  var DropDown = React.createClass(
  {
      render: function () {
          var items = this.props.data;
          return (
          <select value={this.props.Selected}>
              {
                  items.map(function (item) {
                      return <option value={item.Name }>{item.Name}</option>;
                  })
              }
          </select>);
      }
  });
  
  ***Option 2:***
  var DropDown = React.createClass(
  {
      render: function () {
          var items = this.props.data;
          return (
          <select>
              {
                  items.map(function (item) {
                      return <option value={item.Name} selected={selectedItem == item.Name}>{item.Name}</option>;
                  })
              }
          </select>);
      }
  });
  
  ***Option 3:***
  var DropDown = React.createClass(
      {
          render: function () {
              var items = this.props.data;
              return (
              <select>
                  {
                      items.map(function (item) {
  
                                              if (selectedItem == item.Name)
                      return <option value={item.Name } selected>{item.Name}</option>;
                  else
                      return <option value={item.Name }>{item.Name}</option>;
                      })
                  }
              </select>);
          }
      });
  

  回复于 2024-04-26T01:59:27+08:00
• 11

  只需添加选择标记的第一个选项：

  <option disabled hidden value=''></option>
  

  这将成为默认值，当您选择有效选项时，将在您的州设置

  回复于 2024-04-26T01:59:27+08:00
• 0

  当状态发生变化时， <select> 标签没有更新到正确的 <option> 时出现问题 . 我的问题似乎是，如果你快速连续渲染两次，第一次没有预先选择 <option> 但第二次有一次，那么 <select> 标签不会在第二次渲染时更新，而是保持默认优先 .

  我找到了一个使用refs的解决方案 . 您需要获取对 <select> 标记节点的引用（可能嵌套在某个组件中），然后在 componentDidUpdate 钩子中手动更新其上的 value 属性 .

  componentDidUpdate(){
    let selectNode = React.findDOMNode(this.refs.selectingComponent.refs.selectTag);
    selectNode.value = this.state.someValue;
  }
  

  回复于 2024-04-26T01:59:27+08:00
• 1

  我有一个简单的解决方案是遵循HTML基础 .

  <input
    type="select"
    defaultValue=""
    >
    <option value="" disabled className="text-hide">Please select</option>
    <option>value1</option>
    <option>value1</option>
  </input>
  

  .text-hide 是一个bootstrap的类，如果你不使用bootstrap，你在这里：

  .text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
  }
  

  回复于 2024-04-26T01:59:27+08:00
• 2

  React自动为此目的理解布尔值，所以你可以简单地写 (note: not recommended)

  <option value={option.value} selected={optionsState == option.value}>{option.label}</option>
  

  它会适当地输出'选中' .

  但是，React让您更轻松 . 而不是在每个选项上定义 selected ， you can (and should) simply write value= on the select tag itself ：

  <select value={optionsState}>
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>
  

  有关详细信息，请参阅the React select tag doc .

  回复于 2024-04-26T01:59:27+08:00
• 2

  我通过设置defaultProps解决了类似的问题：

  ComponentName.defaultProps = {
    propName: ''
  }
  

  <select value="this.props.propName" ...

  因此，如果我的道具在安装之前不存在，我现在可以避免编译错误 .

  回复于 2024-04-26T01:59:27+08:00
• 469

  这是一个完整的解决方案，其中包含了最佳答案和下面的评论（这可能有助于某些人努力拼凑起来）：

  在主要组成部分：

  class ReactMain extends React.Component {
  
    constructor(props) {
      super(props);
      // bind once here, better than multiple times in render
      this.handleChange = this.handleChange.bind(this);
      this.state = { fruit: props.item.fruit };
    }
  
    handleChange(event) {
      this.setState({ [event.target.name]: event.target.value });
    }
  
    saveItem() {
      const item = {};
      item.fruit = this.state.fruit;
      // do more with item object as required (e.g. save to database)
    }
  
    render() {
      return (
        <ReactExample name="fruit" value={this.state.fruit} onChange{this.handleChange} />
      )
    }
  
  }
  

  包含组件（现在是无状态功能）：

  export const ReactExample = (props) => (
    <select name={props.name} value={props.value} onChange={props.handleChange}>
      <option value="A">Apple</option>
      <option value="B">Banana</option>
      <option value="C">Cranberry</option>
    </select>
  )
  

  主要组件维护水果的选定值（处于状态），包含的组件显示select元素，更新被传递回主组件以更新其状态（然后循环回包含的组件以更改所选值） .

  请注意使用名称prop，它允许您为同一表单上的其他字段声明单个handleChange方法，而不管其类型如何 .

  回复于 2024-04-26T01:59:27+08:00
• 0

  为MULTISELECT / optgroups发布类似的答案：

  render() {
    return(
      <div>
        <select defaultValue="1" onChange={(e) => this.props.changeHandler(e.target.value) }>
          <option disabled="disabled" value="1" hidden="hidden">-- Select --</option>
          <optgroup label="Group 1">
            {options1}
          </optgroup>
          <optgroup label="Group 2">
            {options2}
          </optgroup>
        </select>
      </div>
    )
  }
  

  回复于 2024-04-26T01:59:27+08:00
• -2

  这是如何做到的最新例子 . 从react docs开始，加上自动绑定"fat-arrow"方法语法 .

  class FlavorForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: 'coconut'};
    }
  
    handleChange = (event) =>
      this.setState({value: event.target.value});
  
    handleSubmit = (event) => {
      alert('Your favorite flavor is: ' + this.state.value);
      event.preventDefault();
    }
  
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <label>
            Pick your favorite flavor:
            <select value={this.state.value} onChange={this.handleChange}>
              <option value="grapefruit">Grapefruit</option>
              <option value="lime">Lime</option>
              <option value="coconut">Coconut</option>
              <option value="mango">Mango</option>
            </select>
          </label>
          <input type="submit" value="Submit" />
        </form>
      );
    }
  }
  

  回复于 2024-04-26T01:59:27+08:00