Question

我正在通过道具创建一个具有默认值的选择组件，但是突然当我尝试选择一个选项时，选择什么也不做。我尝试不使用初始值来解决问题，但程序不应那样做。 // UserMaintenanceModal 类UserMaintenanceModal扩展了Component { 状态= { user_department：this.props.data.user_department，部门：[ {id：1，名称：“ IT”}，{id：2，名称：“ BM”} ] } handleChange =（事件）=> { this.setState（{user_department：event.target.value}）; } render（）{ const {user_department} = this.state; 返回（部门 <选择 className =“ form-control form-control-sm” 名称='user_department' 值= {user_department} onChange = {this.handleChange} > { this.state.departments！= null && this.state.departments.map（部门=> <选项键= {department.id} 值= {department.name} > {部门名称} ） } ） } } 解抱歉，是我的错。我没有显示所有源代码。之所以没有更改它，是因为该代码位于父组件中。 // NavComponent componentWillMount（）{ document.addEventListener（'mousedown'，this.handleClick，false）; } componentWillUnmount（）{ document.removeEventListener（'mousedown'，this.handleClick，false）; } 我确实从这里得到了这段代码。在组件外部单击时，它将隐藏活动的下拉导航菜单。

Answer 1

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

示例

class App extends React.Component {
  state = {
    options: ["foo", "bar", "baz"],
    selectedOption: this.props.defaultOption
  };

  onChange = e => {
    this.setState({ selectedOption: e.target.value });
  };

  render() {
    const { options, selectedOption } = this.state;

    return (
      <select value={selectedOption} onChange={this.onChange}>
        {options.map((option, index) => (
          <option key={index} value={option}>
            {option}
          </option>
        ))}
      </select>
    );
  }
}

ReactDOM.render(<App defaultOption="bar" />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

看看我编写的此CodePen：https://codepen.io/Gesma94/pen/QYYWKG

因为您要从道具中获取值，所以这意味着父组件将值保持在状态中（可能），因此，当您选择一个选项时，您需要更新父组件的状态，并依次为此，您需要使用Parent的选项将handlerFunction传递给Component。

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

编辑好吧，..问题之一就是我昨天说的：您将默认值传递给UserMaintenanceModal组件，该默认值保存在{{ 1}}组件。但是，然后，在App组件中，您更新自身的状态，而不是UserMaintenanceModal组件的状态，因此您有点不一致。

无论如何，这不是您最大的问题：据我所知，存在一些“困惑”（或者可能是我不太了解您要实现的目标:)）。因此，现在我假设，正如我在评论中所说，您只想显示属于所选部门的所有用户！

我看到，在App组件的handleChange内部，您保存了该州的App属性中有关当前点击的用户的信息（我不知道这是否是强制性的，或者是尝试达到我的预期）。万一您想保存该信息，这是多余的，因为您已经在data属性中拥有了所有这些信息：您可以只保存users或userId中的位置点击的用户数组。

然后，我也不明白为什么users最初设置为showModal并在单击用户时变为false：这样看来所有用户都应该可见在开始时，一旦您单击其中的一个，就可以通过单击的用户所属的部门来过滤用户。但是，如果是这种情况，我不知道为什么选择应该在之后变得可见..：S

最后，在true组件的render()方法中，您应该以某种方式说“嘿，仅呈现所选部门所属的用户”，您没有尝试过（就我而言）可以看到）。在下面的示例中，我使用的是App本机函数，但是您只保留了filter函数，并且仅当其map等于当前所选用户时才返回用户。

无论如何，我还认为选择应该从一开始就可见，并且我已经分叉了您的代码笔，看看这个，让我知道这是否是您想要的：https://codepen.io/Gesma94/pen/aXXjvE

请注意，在此示例中，部门值处于user_department状态，这根本不是一件好事：您应该从保存在状态中的UserMaintenanceModal数组中检索部门users组件中的组件，然后将它们传递给App组件。.我的意思是，您应该执行类似“确定，让我们查看所有用户并查看我拥有的所有部门。现在，有了它，让我们将它们传递给UserMaintenanceModal。

Answer 3

问题

就我而言，我想根据selected字段来切换或渲染不同的组件以进行填充。每当我切换它时，我都无法重置渲染组件的选定字段。结果，我不能显示正确的占位符，而是先显示option。这是错误的，可能会使用户感到困惑。

解

我在defaultValue标记中添加了select。我希望用户第一次看到的占位符

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

 <select
        name={inputName}
        id={inputId}
        className="input-controller-required"
        required
        onChange={onHandleInputChange}
        defaultValue={defaultValue}
        value={defaultValue}   // I forgot to add value
      >
        <option disabled value="">{placeholder}</option>
        {
          options.map((item, index) => (
            <option value={item.value} key={index}>{item.text}</option>
          ))
        }
      </select>

谢谢@Jolly的回答和其他贡献者的支持。

设置默认值时，<select>不会更改其选择的<option>

3 个答案: