選択状態に基づいて状態値をオフに設定する

Question

選択状態のオプションはどのように使用できますか？

this.state = { 
     posts: [], 
     question: '', 
     body: '', 
     postType: '', 
     } 

      <select value="types" className="u-full-width"> 
       <option value="Option 1">Question</option> 
       <option value="Option 2">Discussion</option> 
       <option value="Option 3">Clout</option> 
       </select> 

ユーザーが選択した内容に基づいてpostTypeの状態を設定する方法がわかりません。

 getPostType() { 
     const type = 
     this.setState({ postType: type }); 
     } 

Answer 1

次の実装を試すことができます。

<select className="u-full-width" 
     onChange= this.handleOnChange.bind(this) 
     ref={value => this.refName = value}> 
    <option value="Option 1">Question</option> 
    <option value="Option 2">Discussion</option> 
    <option value="Option 3">Clout</option> 
</select> 

handleOnchange(e){ 
    e.preventDefault(e); 
    const type = this.refName.value; 
    setState({postType: type}); 
} 

が、それは参考になりましたホープ：

class Sample extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    posts: [], 
    question: '', 
    body: '', 
    postType: 'Question', 
    } 
    this.handleChange = this.handleChange.bind(this); 
} 

handleChange(event) { 
    this.setState({postType: event.target.value}); 
} 

render() { 
    return (
    <form> 
    <label> 
     Select your postType: 
     <select className="u-full-width" value={this.state.postType} 
     onChange={this.handleChange}> 
      <option value="Question">Question</option> 
      <option value="Discussion">Discussion</option> 
      <option value="Clout">Clout</option> 
     </select> 
    </label> 
    </form> 
    ); 
    } 
} 

ReactDOM.render(
    <Sample />, 
    document.getElementById('root') 
); 

Answer 2

は、私が何を探していることは、次であると思います！

Answer 3

selectの変更を処理し、状態の値を保存してselectに渡す関数を追加する必要があります。このような

何か：これは、制御コンポーネントと呼ばれる

class App extends React.Component { 
 
constructor(props){ 
 
    super(props); 
 
    this.state = { 
 
     postType: 'Option 1', 
 
     } 
 
\t this.onChange = this.onChange.bind(this) 
 
}; 
 

 

 
onChange(event){ 
 
this.setState({ 
 
    postType: event.target.value 
 
}) 
 
} 
 

 

 
render() { 
 
    return (
 
     <div> 
 
      <select value={this.state.postType} onChange={this.onChange} className="u-full-width"> 
 
       <option value="Option 1">Question</option> 
 
       <option value="Option 2">Discussion</option> 
 
       <option value="Option 3">Clout</option> 
 
       </select> 
 
      {this.state.postType} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('container') 
 
)

<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="container"></div>

。あなたはそれについての詳細を読むことができますhere。