ReactJS <select>具有不區分大小寫的值

Question

通常，我會使用<option> HTML標記中的selected選項來構建以下ReactJS組件：

import React, { Component } from "react";

class Caller extends Component {
    render = () => {
        return <Test filter={"item2"} />;
    };
}

class Test extends Component {
    render = () => {
        let data = [
            {
                key: "Item1",
                value: "Item1"
            },
            {
                key: "Item2",
                value: "Item2"
            },
            {
                key: "Item3",
                value: "Item3"
            }
        ];

        let options = [];

        data.map(item => {

            let selected = this.props.filter.toLowerCase() === item.key.toLowerCase();

            options.push(
                <option selected={selected} value={item.value}>{item.key}</option>
                );
        });

        return (
            <select>
                {options}
            </select>
        );
    };
}

export default Caller;

ReactJS抱怨以下警告：

Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

我知道如何在ReactJs上使用<select>的value屬性，但這會使我的組件區分大小寫，這是我不想使用的。

如何對不區分大小寫的數據正確遵循ReactJS value規則？

Answer 1

由於您同時具有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> 

如果你不能成為嚴格的關於value ，以及，你可以使用陣列＃找 ，找到value為不區分大小寫key ，並將其設置為value / defaultValue的屬性，如果你想控制/失控的組件：

 const data = [ { key: "Item1", value: "Item1" }, { key: "Item2", value: "Item2" }, { key: "Item3", value: "Item3" } ]; class Test extends React.Component { render() { const pattern = new RegExp(`^${this.props.filter}$`, 'i'); const selected = (data.find((item) => pattern.test(item.key)) || {}).value; return ( <select defaultValue={selected}> {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>