React实现下拉框动态生成指定数量输入框并支持删除功能求助

嘿，你已经搞定了手动添加删除输入框的核心功能，这太棒了！咱们现在把它改成通过下拉框选择数量来生成输入框的版本，其实只需要几个小改动就能实现，一起来看看：

修改后的完整代码 #

class App extends React.Component {
  constructor(props) {
    super(props);
    // 新增selectedCount跟踪下拉框选中的数量，初始为1和默认users数量一致
    this.state = { 
      users: [{firstName: "", lastName: ""}],
      selectedCount: 1
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleSelectChange = this.handleSelectChange.bind(this);
  }

  // 处理下拉框选择事件，根据选中数量调整输入框组数
  handleSelectChange(e) {
    const targetCount = parseInt(e.target.value, 10);
    this.setState(prevState => {
      let updatedUsers = [...prevState.users];
      
      // 如果当前组数少于目标数量，添加新的空输入框组
      if (updatedUsers.length < targetCount) {
        const needAdd = targetCount - updatedUsers.length;
        for (let i = 0; i < needAdd; i++) {
          updatedUsers.push({ firstName: "", lastName: "" });
        }
      } 
      // 如果当前组数多于目标数量，截断到目标数量（保留前N组的输入内容）
      else if (updatedUsers.length > targetCount) {
        updatedUsers = updatedUsers.slice(0, targetCount);
      }

      return {
        users: updatedUsers,
        selectedCount: targetCount
      };
    });
  }

  createUI(){
    return this.state.users.map((el, i) => (
      <div key={i}>
        <input placeholder="First Name" name="firstName" value={el.firstName ||''} onChange={this.handleChange.bind(this, i)} />
        <input placeholder="Last Name" name="lastName" value={el.lastName ||''} onChange={this.handleChange.bind(this, i)} />
        <input type='button' value='remove' onClick={this.removeClick.bind(this, i)}/>
      </div>
    ))
  }

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

  removeClick(i){
    this.setState(prevState => {
      let users = [...prevState.users];
      users.splice(i, 1);
      // 删除后同步更新下拉框选中值为当前剩余数量（可选，根据需求决定是否保留）
      return {
        users,
        selectedCount: users.length
      };
    });
  }

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

  render() {
    // 生成1到10的下拉选项，你可以根据需求调整最大数值
    const numberOptions = Array.from({length: 10}, (_, idx) => idx + 1);
    
    return (
      <form onSubmit={this.handleSubmit}>
        {/* 新增下拉选择框 */}
        <div>
          <label>选择输入框组数：</label>
          <select 
            value={this.state.selectedCount} 
            onChange={this.handleSelectChange}
          >
            {numberOptions.map(num => (
              <option key={num} value={num}>{num}</option>
            ))}
          </select>
        </div>
        <br />
        {this.createUI()}
        {/* 如果你还想保留手动添加按钮，可以保留下面这行，记得同步更新selectedCount */}
        {/* <input type='button' value='add more' onClick={() => this.setState(prev => ({users: [...prev.users, {firstName:"", lastName:""}], selectedCount: prev.selectedCount +1}))}/> */}
        <br />
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

关键改动说明 #

1. 新增状态跟踪：在state里添加了selectedCount，用来记录下拉框选中的数量，确保下拉框和实际输入框组数保持同步。
2. 下拉框选择逻辑：handleSelectChange方法会根据选中的数量，对现有users数组进行调整——少了就加空的输入框组，多了就截断（还能保留已输入的内容）。
3. 删除同步优化：修改了removeClick方法，删除输入框后会同步更新selectedCount，让下拉框的选中值和剩余输入框数量一致（这个是可选的，如果你希望删除后下拉框仍保持之前的选择，可以去掉这部分逻辑）。
4. 下拉选项生成：用Array.from生成了1到10的选项，你可以轻松调整最大数值（比如把length:10改成length:n）。

这样修改后，你就能通过下拉框选择数量来快速生成对应组数的输入框，同时还保留了手动删除的功能，完全满足你的需求~

内容的提问来源于stack exchange，提问作者Aniket Yadav