React JSX：使用默认选项在选定的 <select> 选项上选择“selected”有问题

Question

我知道，* Link 有一个相关问题

• 但我在设置 defaultValue 时遇到问题。
• value 和 onChange 有效
• 即使使用defaultValue="m" 或defaultValue="f" 也可以使用
• 但是在动态设置 defaultValue 时不起作用。

// value of member.gender is 'f' and confirmed from console.log
<div className="col-3">
  <select name="gender" id="id_gender" defaultValue={member.gender}>
    <option value="m" >Male</option>
    <option value="f">Female</option>
  </select>
</div>

• member.gender 的值是 "f"，但始终是 Male，即第一个选项被选中。
• 尝试使用包含在刻度中的 "${member.gender}" 引用 {member.geder} 不起作用。
• 我正在使用基于useRef 的方法，让表单表现为不受控制的组件。因此需要为选择元素提供默认值。

Answer 1

不用在每个选项上定义defaultValue 或selected，您可以在选择标签本身上写value={member.gender}：

<div className="col-3">
  <select name="gender" id="id_gender" value={member.gender}>
    <option value="m" >Male</option>
    <option value="f">Female</option>
  </select>
</div>

Answer 2

Reactjs 库提供了两种处理表单元素的选项。

1. 受控组件 - 如果您需要根据表单值更改 UI 中的某些内容，请使用此选项。

import { Component } from "react";

class App extends Component {
  state = {
    gender: "",
  }; // Step 1 - Create a property related to `select` form element in state object

  onChange = (e) => {
    const val = e.target.value;
    e.preventDefault();
    this.setState(() => ({
      gender: val,
    })); // Step 5 - You can update the value by using `setState` 
  }; // Step 3 - Create a method for `select` form element onChange event

  render() {
    return (
      <div className="col-3">
        <select
          name="gender"
          id="id_gender"
          value={this.state.gender} {/* Step 2 - Set that `select` related state property to value attribute */}
          onChange={this.onChange} {/* Step 4 - Set that method to onChange event */}
        >
          <option value="m">Male</option>
          <option value="f">Female</option>
        </select>
      </div>
    );
  }
}

export default App;

1. 不受控制的组件 - 如果您只需要形成数据以保存在数据库中，那么您可以使用此选项。

import { Component, createRef } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.selectEle = createRef(); // Step 1 - Create the reference
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit = (e) => {
    e.preventDefault();
    alert(this.selectEle.current.value); // Step 3 - You can access to the value like this.
  };

  render() {
    return (
      <div className="col-3">
        <select name="gender" id="id_gender" ref={this.selectEle}> {/* Step 2 - Add the reference to `select` element */}
          <option value="m">Male</option>
          <option value="f">Female</option>
        </select>
        <button type="submit" onClick={this.onSubmit}>
          Submit
        </button>
      </div>
    );
  }
}

export default App;