是否可以相对于 React JS 中的选择选项设置输入类型？答案

【问题标题】：Is it possible to set the type of input relative to the choice of a select option in React JS?是否可以相对于 React JS 中的选择选项设置输入类型？
【发布时间】：2020-03-14 01:11:44
【问题描述】：

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

所以我需要设置相对于我的选择的输入类型。

例如，如果我选择日期，我想输入<input type="date" step="0.01" name="DL_m1" name="entrance" value={el.entrance ||''} onChange={this.handleChange2.bind(this, i)}/>，如果我选择另一件事<input type="number" step="0.01" name="DL_m1" name="entrance" value={el.entrance ||''} onChange={this.handleChange2.bind(this, i)}/>

有可能吗？如果有人可以指导我如何进行。

   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>
      )
    }
}

谢谢你

【问题讨论】：

也许解决方案是“准备”那些不同的输入并根据选择显示它。
@MaximeGirou 是的，抱歉，我一点也不准确。我最大的问题是我无法创造一个干净的条件来有效地选择我的输入。我正在尝试，但我所有的条件都以错误结束。如果做出反应，也许我无法正常工作。
您可以管理状态中的类型并简单地在您的输入类型中呈现this.state.inputType。我将很快粘贴示例代码。
你要放什么类型的？文本、日期、数字...？
@MaximeGirou 我希望能够做到 3。例如，能够选择一个名为“text_input”的选择选项，并直接将 type=text 放入我的输入中。（这当然是 3）

标签： javascript reactjs select input

【解决方案1】：

有了这个，你可以管理状态中的类型。你可以重构它以适应你的代码。

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

【讨论】：