ReactJS <select>

Question

通常、私は<option> HTMLタグからselectedオプションを使用して、次のReactJSコンポーネントを構築します：

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

：

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は、次の警告とそれについて不平を言います私はReactJsの<select>のvalueプロパティを使用する方法を知っていますが、これはコンポーネントの大文字と小文字を区別します。

大文字と小文字を区別しないデータでReactJS valueルールを正しく実行するにはどうすればよいですか？

Answer 1

あなたはkeyとvalueの両方を持っている、とあなたは、keyを表示props.filterとしてvalueを使用して、あなたは手紙のケースに厳しいことができますので：

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についても厳格である必要があります。Array#findを使用すると、大文字と小文字を区別しないkeyのvalueを見つけることができます。あなたがコントロールしたい場合value/defaultValue属性としてそれをT /制御されていないコンポーネント：

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>