Javascript <；选择>；不会更改其所选的<；选项>；设置默认值时

我正在通过道具创建一个带有默认值的选择组件，但当我试图选择一个选项时，突然选择了“不做任何事情”

我试着不使用初始值来解决问题，但程序不应该这样做

//UserMaintenanceModal
class UserMaintenanceModal extends Component {
    state = {
        user_department: this.props.data.user_department,
        departments: [
            {id: 1, name: "IT"}, {id:2, name: "BM"}
        ]
    }

    handleChange = (event) => {
        this.setState({user_department: event.target.value});
    }

    render(){
        const { user_department } = this.state;
        return (
            <label>Department</label>
            <select 
                className="form-control form-control-sm" 
                name='user_department'
                value={user_department}
                onChange={this.handleChange}
             >
             {
              this.state.departments != null && this.state.departments.map(
                       department => 
                           <option 
                               key = {department.id} 
                               value = {department.name}
                            >
                                {department.name}
                            </option>
                      )
               }
               </select>
        )
    }
}

---

我确实从你那里得到了这个密码。当在组件外部单击时，它会隐藏活动下拉导航菜单。

您可以将默认值prop置于组件状态并继续使用

//NavComponent

componentWillMount() {
    document.addEventListener('mousedown', this.handleClick, false);
}

componentWillUnmount() {
  document.removeEventListener('mousedown', this.handleClick, false);
}

示例

类应用程序扩展了React.Component{
状态={
选项：[“foo”、“bar”、“baz”]，
selectedOption:this.props.defaultOption
};
onChange=e=>{
this.setState（{selectedOption:e.target.value}）；
};
render（）{
const{options，selectedOption}=this.state；
返回(
{options.map（（选项，索引）=>(
{option}
))}
);
}
}
render（，document.getElementById（“根”））
看看我做的这个代码笔：

由于您从道具获取值，这意味着父组件将值保持在状态（可能），因此，当您选择一个选项时，您需要更新父组件的状态，为此，您需要使用父组件的选项向组件传递handlerFunction

class List extends React.Component {
    options = ["one", "two", "threee"];

    render() {
        const {handleChange, value} = this.props;
        return (
            <select value={value} onChange={handleChange}>
                {
                    this.options.map((option, index) =>
                        <option key={index} value={option}>
                            {option}
                        </option>
                 )}
            </select>
        );
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {value: "one"};
    }

    handleChange = (e) => {
        this.setState({value: e.target.value})
    }

  render() {
      return <List handleChange={this.handleChange} value={this.state.value} />
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

类列表扩展了React.Component{
选项=[“一”、“二”、“三”]；
render（）{
const{handleChange，value}=this.props；
返回(
{
this.options.map（（选项，索引）=>
{option}
)}
);
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:“一”}；
}
handleChange=（e）=>{
this.setState（{value:e.target.value}）
}
render（）{
回来
}
}
ReactDOM.render(

请注意，在本例中，departments值处于
usermaintenancemodel
状态，这一点都不好：您应该从
App
组件状态下保存的
users
数组中检索部门，然后将其传递给
usermaintenancemodel
组件..我的意思是你应该这样做：“好的，让我们看看我所有的用户，看看我所有的部门……好的，现在，我有了它，让我们把它们传递给
usermaintenancemodel
问题
在我的例子中，我想切换或渲染不同的组件，以根据
选定的
字段进行填充。每当切换时，我都无法重置渲染组件的选定字段。因此，我无法显示正确的占位符，而不是先显示
选项
。这是错误的，可能会混淆用户

解决方案
我在
select
标签中添加了
defaultValue
。
这是我希望用户第一次看到的占位符

我在
select
标记中添加了
值。
这有助于我跟踪用户何时改变主意或清理数据


{占位符}
{
选项.map（（项目，索引）=>(
{item.text}
))
}

谢谢，@Jolly的答案和其他贡献者的支持。
我运行代码片段，但当我应用到我的程序时，它不起作用。@AdrianManuelCleofe，这很令人沮丧。你能用你的整个组件更新这个问题吗？@AdrianManuelCleofe。它在codepen上起作用，但在我的项目上不起作用。请检查此[链接]因为你的编辑，我做了第二个密码笔→  老实说，它是有效的，所以可能在其他地方有错误。顺便说一句，如果您希望值
this.props.data.user\u department
在更改
UserMaintenanceModal
的状态时也会更改，那么它不会发生：您已经在
UserMaintenanceModal
的状态中创建了该值的副本，因此父组件不会更改我编辑了您的工作以及我的react应用程序的确切代码。它在codepen上工作，但在我的项目上不工作。请检查此codepen.io/anon/pen/aXXdqz？editors=0011并尝试在您的计算机上创建react应用程序。您能解释一下您工作的目的吗？我猜您只想显示包含列
部门
等于在
选择
中选择的值。我说得对吗？你说得对，因为不需要包含其他属性。这是为了演示错误。我已在上面编辑了答案。请看一下！：）