是否可以相對於 React JS 中的 select 選項的選擇來設置輸入類型？

Question

我今天寫這個是因為我需要幫助。 首先，不是我的代碼，而是適合我的問題的 Internet 示例。

所以我需要設置相對於我的 select 的輸入類型。

例如，如果我選擇日期，我希望類型為<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>
      )
    }
}

謝謝

Answer 1

有了這個，您可以管理 state 中的類型。 您可以重構它以適合您的代碼。

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