Reactjs 在选择框中设置基于状态的关闭选项值

如何使用“选择我的状态”中的选项

 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>   

---

您可以尝试以下实现

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')
 );

类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
员额：[]，
问题：''，
正文：“”，
postType:'问题'，
}
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
this.setState（{postType:event.target.value}）；
}
render（）{
返回(
选择您的帖子类型：
问题:
讨论
影响力
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

我认为您需要的是：

<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});
}

this.refName=value}>
问题:
讨论
影响力
更改（e）{
e、 防止违约（e）；
常量类型=this.refName.value；
setState（{postType:type}）；
}

---

希望对你有帮助

您需要添加一个函数来处理select上的更改，将值保存在状态中并将其传递给select

大概是这样的：

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
postType:“选项1”，
}
this.onChange=this.onChange.bind（this）
};
onChange（事件）{
这是我的国家({
postType:event.target.value
})
}
render（）{
返回(
问题:
讨论
影响力
{this.state.postType}
);
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
)

看到了吗？这个问题是，如果它有问题，它不是默认的问题，你必须重新选择问题。@Omar我明白。请记住将

此

绑定到

getPostType

函数。

<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});
}