Javascript 是否可以设置与React JS中选择选项相关的输入类型？

我今天写这篇文章是因为我需要帮助。 首先，这不是我的代码，而是一个互联网的例子，适合我的问题

因此，我需要设置与select相关的输入类型

例如，如果我正在选择日期，我想输入

，如果我正在选择另一个东西

有可能吗？如果有人能告诉我怎么做

   export default class DynamicForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = initialState;

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit2 = this.handleSubmit2.bind(this);
   }

  addClick(){
    this.setState(prevState => ({
      users: [...prevState.users, { Name_initial: "", operator: "", entrance: "" }]
    }))
  }

  createUI(){
    return this.state.users.map((el, i) => (
      <div key={i}>
       <select name='formb_4' placeholder="First Name" name="Name_initial" value={el.Name_initial ||''} onChange={this.handleChange2.bind(this, i)}  >
                 {['Date Cloture exercice N', 'Date Cloture exercice N-1', 'Date de création:', 'Durée Cloture exercice N', 'Durée Cloture exercice N-1', 'Date'].map((i,j)=>{
                   return <option key={i} value={i}>{i}</option>})}
                 </select>
                 {this.test15(el, i)}
      <select name='formb_4' placeholder="First Name" name="operator" value={el.operator ||''} onChange={this.handleChange2.bind(this, i)}  >
                 {['>', ">=", "==", '<', '<='].map((i,j)=>{
                   return <option key={i} value={i}>{i}</option>})}
                 </select>
      <input type="number" step="0.01" name="DL_m1" name="entrance" value={el.entrance ||''} onChange={this.handleChange2.bind(this, i)}/>
         <input type='button' value='remove' onClick={this.removeClick.bind(this, i)}/>
      </div>
    ))
 }

removeClick(i){
  let users = [...this.state.users];
  users.splice(i, 1);
  this.setState({ users });
}

  handleChange2(i, e) { const { name, value } = e.target;
     let users = [...this.state.users];
     users[i] = {...users[i], [name]: value};
     this.setState({ users });
  }

  handleSubmit2(event) {
    alert('A name was submitted: ' + JSON.stringify(this.state.users));
    event.preventDefault();
   }

  handleChange(event) {
    const InputValue = event.target.value;
    const stateField = event.target.name;
    this.setState({
      [stateField]: InputValue,
    });
    console.log(this.state);


  }

  async handleSubmit(event) {
    this.setState({ loading: true });

    setTimeout(() => {
      this.setState({ loading: false });
    }, 2000);

    event.preventDefault();
  );
  }

     render() {
       const { handleSubmit, handleChange} = this.props
      return(
        <div id="menu">
          <div id="test">
            <div id="normal"><label id="number">1</label><label id='title'>Date</label></div><br/>
              <form onSubmit={this.handleSubmit2}>
                {this.createUI()}
                <input type='button' value='add more' onClick={this.addClick.bind(this)}/>
                <input type="submit" value="Submit" />
                </form>
              </div>
            </div>
      )
    }
}

导出默认类DynamicForm扩展React.Component{
建造师（道具）{
超级（道具）；
this.state=初始状态；
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit2=this.handleSubmit2.bind（this）；
}
addClick（）{
this.setState（prevState=>({
用户：[…prevState.users，{Name_首字母：''，运算符：''，入口：'}]
}))
}
createUI（）{
返回this.state.users.map（（el，i）=>(
{['Date Cloture Exercie N'、'Date Cloture Exercie N-1'、'Date de création:'、'Durée Cloture Exercie N'、'Durée Cloture Exercie N-1'、'Date']地图（（i，j）=>{
返回{i}}}
{this.test15（el，i）}
{['>'、“>=”、“==”、“使用此选项，您可以管理状态中的类型。您可以重构它以适合您的代码

class App extends Component {
  constructor() {
    this.state = {
      inputType: 'text'
    }
  }

  handleInputTypeChange = (e) => {
    this.setState({...this.state, inputType: e.target.value})
  }

  render() {
    return (
      <>
      <select id="inputType" onChange={this.handleInputTypeChange}>
        <option value="text">Text</option>
        <option value="date">Date</option>
        <option value="email">Email</option>
        <option value="number">Number</option>
      </select>

      {/* Input Text */}
      <input type={this.state.inputType} />
      </>
    )
  }
}

export default App

类应用程序扩展组件{
构造函数（）{
此.state={
输入类型：“文本”
}
}
handleInputTypeChange=（e）=>{
this.setState（{…this.state，inputType:e.target.value}）
}
render（）{
返回(
正文
日期
电子邮件
数
{/*输入文本*/}
)
}
}
导出默认应用程序
也许解决方案是“准备”这些不同的输入和显示取决于选择。@MaximeGirou是的，对不起，我一点也不精确。我最大的问题是我无法创建一个干净的条件来有效地选择我的输入。我正在尝试，但我的所有条件都以错误结束。如果处于react状态，可能我无法正常执行操作。您可以管理状态中的类型，只需r在您的输入类型中添加
this.state.inputType
。我将很快粘贴一个示例代码。您希望输入什么类型？文本、日期、数字…？@MaximeGirou我希望能够执行3。例如，能够选择名为“Text\u input”的选择选项，并直接将type=Text放入我的输入中。（这当然是第三个）