Question

我有这样的数据

    private void checkBox_CheckedChanged(object sender, RoutedEventArgs e)
    {
        if ((symbols_cb.IsChecked == true) && (digits_cb.IsChecked == true))
        {
            MessageBox.Show("Check - Yes it is selected.");
        }
    }

如何将其映射到选择的HTML？我这样做了

"dates": {
"contract": [
      {"id":1,"name":"1 month","value":false},
      {"id":2,"name":"2 months","value":true}
    ]
}

部分工作，它已经渲染，但现在我一直坚持选择该选项。

Answer 1

<强> Working fiddle

你只需使用像selected这样的selected={obj.value}属性，例如：

return <select className="form-control">
    {item.dates.contract.map(obj => 
        <option value={obj.value} selected={obj.value}>{obj.value}</option>
    )}
</select>

希望这有帮助。

Answer 2

＆＃13;

class MyComponent extends React.Component {
constructor(props) {
    super(props);
    this.state = {selectValue: [true]};

    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({selectValue: [event.target.value]});
  }
      render() {
      var item = {
          "dates": {
            "contract": [{
              "id": 1,
              "name": "1 month",
              "value": false
            }, {
              "id": 2,
              "name": "2 months",
              "value": true
            }, {
              "id": 3,
              "name": "3 months",
              "value": true
            }]
          }
        };
      
        return <div>
<select className="form-control" multiple="true" value={this.state.selectValue} onChange={this.handleChange}>
    {item.dates.contract.map(obj => 
        <option key={obj.id} value={obj.value} >{obj.value.toString()} - {obj.id}</option>
    )}
</select>
        </div>;
      }
    }



    ReactDOM.render( < MyComponent / > ,
      document.getElementById('root')
    );

＆＃13;

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

＆＃13;

将数据映射到put并选择所选项目

2 个答案: