Question

通常我会使用＆lt; option＆gt;中的选定选项构建以下ReactJS组件。 HTML标签：从“react”导入React，{Component}; class Caller扩展Component { render =（）=＆gt; { return＆lt; Test filter = {“item2”} /＆gt ;; }; } class Test extends Component { render =（）=＆gt; { 让数据= [ { key：“Item1”，值：“Item1” }， { key：“Item2”，值：“Item2” }， { key：“Item3”，值：“Item3” } ]。 let options = []; data.map（item =＆gt; { let selected = this.props.filter.toLowerCase（）=== item.key.toLowerCase（）; options.push（＆lt;选择的选项= {selected} value = {item.value}＆gt; {item.key}＆lt; / option＆gt; ）; }）; 回来（＆LT;选择＆GT; {}选项＆LT; /选择＆GT; ）; }; } 导出默认来电; ReactJS通过以下警告抱怨：警告：在＆lt; select＆gt;上使用`defaultValue`或`value`道具而不是在＆lt; option＆gt;上设置`selected`。我知道如何使用＆lt; select＆gt;中的value属性在ReactJs上，但这将使我的组件区分大小写，我不想要的。如何使用不区分大小写的数据正确遵循ReactJS值规则？

Answer 1

由于您同时拥有J和key，并且显示value，因此使用key作为value，您可以对信件案例：

props.filter

const data = [
  {
      key: "Item1",
      value: "Item1"
  },
  {
      key: "Item2",
      value: "Item2"
  },
  {
      key: "Item3",
      value: "Item3"
  }
];

class Test extends React.Component {  
  render() {
      return (
          <select defaultValue={this.props.filter}>
              {data.map(item => (
                <option value={item.value}>{item.key}</option>
              ))}
          </select>
      );
  };
}

ReactDOM.render(
  <Test filter="Item2" />,
  demo
);

如果您对<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="demo"></div>也不严格，可以使用Array#find查找不区分大小写value的{{1}}，并将其设置为如果您想要受控/不受控制的组件，请value / key属性：

value

defaultValue

ReactJS <select>，不区分大小写

1 个答案: