React - 通过下拉菜单生成输入字段

Question

我是 React 的新手，我很困惑，我想要的是我有一个下拉列表，其中选项为 1、2、3、4.... 直到 n。假设如果我在下拉数字 5 上选择，那么应该动态生成 5 个输入字段。也适用于创建的每个输入字段。我应该可以使用删除按钮手动删除它们。

我已经创建了输入选项的添加，但它是手动的，就像我们单击添加按钮时添加了新选项，当我们单击删除时，带有索引的特定选项被删除。您可以参考此链接获取代码

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        users: [{firstName: "", lastName: ""}]
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  addClick(){
    this.setState(prevState => ({ 
        users: [...prevState.users, { firstName: "", lastName: "" }]
    }))
  }
  
  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){
     let users = [...this.state.users];
     users.splice(i, 1);
     this.setState({ users });
  }
  
  handleSubmit(event) {
    alert('A name was submitted: ' + JSON.stringify(this.state.users));
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
          {this.createUI()}        
          <input type='button' value='add more' onClick={this.addClick.bind(this)}/>
          <input type="submit" value="Submit" />
      </form>
    );
  }
}

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

https://jsfiddle.net/mayankshukla5031/qL83cf2v/1/

但现在我想用下拉菜单生成它，选择输入选项的大小让我们说 5 因此动态创建 5 个选项字段。

谁能指导我。

Answer 1

这样的事情应该会有所帮助：

class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {
      users: [1],
      options: 1,
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  addClick(){
    const newUsers = Array.from(Array(Number(this.state.options)), (_, i) => i);
    this.setState((prevState) => ({
      users: [...prevState.users, ...newUsers],
    }));
  };

  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) {
    let users = [...this.state.users];
    users.splice(i, 1);
    this.setState({ users });
  }

  handleSubmit(event) {
    alert("A name was submitted: " + JSON.stringify(this.state.users));
    event.preventDefault();
  }
  handleInput = (event) => {
    event.preventDefault();
    this.setState({ options: event.target.value });
  };
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        {this.createUI()}
        <select defaultValue={this.state.options} onChange={this.handleInput}>
          {Array.from(Array(100), (_, i) => i + 1).map((opt) => (
            <option>{opt}</option>
          ))}
        </select>
        <input
          type="button"
          value="add more"
          onClick={this.addClick.bind(this)}
        />
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

我希望这篇文章有所帮助。将输出键与您的输入字段链接。

 function App({data}){
   const [selectedField, setSelectedField] = useState('');
   const [output, setOutput] = useState({}); // u can add a default values of the keys in inital state

   useEffect(()=>{
     if(selectedField !== ''){
       const selectedData = data.filter(el=> name === el.name);
       if(selectedData){
         setOutput(selectedData);
       }
     }
   },[selectedField, data]);

   const onDataFieldRemove = (key) => {
     setOutput(prevState => {
       delete prevState[key]; // if u dont want unwanted data in ur database or use
       // prevState[key] = null; if u want to maintain ur default keys;
       return prevState;
     });
   }

   return (<div>... add ur input fields and remove button</div>)
 }