React：如何选择 select 选项的第一选择

Question

在我的 React 应用程序中，我有一个 select 下拉输入。但是，每当我想在提交表单后填写表单时维护我的 Mpesa 选项的第一次出现 Mpesa（甚至不单击该字段保持原样），我都会收到错误消息

mode(pin):['"" is not a valid choice.']

onChange 不会选择第一个选项，除非我单击另一个选项然后重新select 第一个选项。

表单组件

class FormInvoice extends Component {
  state = {
    invoiceOwner: "",
    product: "",
    quantity: "",
    mode: "",
    status: "",
    payment_made: "",
    payment_options: ["Mpesa", "Cash", "Bank", "Cheque"],
  };

  onChange = (e) =>
    this.setState({
      [e.target.name]: e.target.value,
    });

  render() {
    return (
      <div className="App container">
        <Modal isOpen={this.props.newInvoiceModal} scrollable={true}>
          <ModalBody>
            <FormGroup>
              <Label for="title">Product</Label>
              <Input name="product" value={product} onChange={this.onChange} />
            </FormGroup>
            <FormGroup>
              <Label for="title">Mode</Label>
              <Input                            <==== Option
                type="select"
                name="mode"
                value={mode}
                onChange={this.onChange}
              >
                {this.state.payment_options.map((option, index) => (  
                  <option key={index} value={option}>
                    {option}
                  </option>
                ))}
              </Input>
            </FormGroup>
          </ModalBody>
          <ModalFooter>
            <button onClick={this.onSubmit} className="btn btn-primary">
              Submit
            </button>{" "}
            <Button color="secondary" onClick={this.props.toggleModal}>
              Cancel
            </Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default connect(null, { addInvoiceData })(FormInvoice);

Answer 1

在class中使用componentDidMount设置state的初始值

 componentDidMount(){
  this.setState({mode: this.state.payment_options[0] })
}

如果函数使用 useEffect

const [mode, setMode] = useState("");
useEffect(()=>{
   setMode(payment_options[0]);
},[])

Answer 2

因为您使用 mode 状态变量来跟踪下拉列表。你可以用想要的值初始化它的状态。

state = {
  invoiceOwner: "",
  product: "",
  quantity: "",
  mode: "Mpesa",
  status: "",
  payment_made: "",
  payment_options: ["Mpesa", "Cash", "Bank", "Cheque"],
};

React：如何选择 select 选项的第一选择

React: How to pick the first choice of select option

reactjs

react-select