REACTJS и ANTD: Как изменить содержимое формы с помощью опции <Select>?

Question

Я новичок в React и в настоящее время использую AntD в своем коде ReactJS.В моем коде у меня есть опция выбора, которая должна изменять элементы формы в зависимости от того, какая это форма.

Вот мой выбор:

<Form.Item label="Inquiry Type">
    <Select>
       <Option>
           form 1
       </Option>
       <Option>
           form 2
       </Option>
       <Option>
           form 3
       </Option>
    </Select>
</Form.Item>

Итак, что должно произойтив том, что когда я выбираю форму 1, она должна показывать мне все содержимое формы 1 и то же самое для форм 2 и 3.

Я не уверен, как это сделать.Я прочитал другие вопросы, но они не отвечают на мои.

Answer 1

Проверьте это.

state = {
  selectedForm: "form1"
};
changeForm = value => {
  this.setState({
    selectedForm: value
  });
};
render() {
  const { selectedForm } = this.state;
  return (
    <div>
      <Select value={selectedForm} onChange={value => this.changeForm(value)}>
        <Option value="form1">form 1</Option>
        <Option value="form2">form 2</Option>
        <Option value="form3">form 3</Option>
      </Select>
      {selectedForm === "form1" ? (
        <Form1 />
      ) : selectedForm === "form2" ? (
        <Form2 />
      ) : selectedForm === "form3" ? (
        <Form3 />
      ) : ""}
    </div>
  );
}