当我看到controlled form components in react.js official website的参考文献中的示例时,我想知道如何实现form,在其中可以动态地将removeadd input个元素设置为受控组件?这可能吗?

在这些例子中,我们可以看到:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

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

  handleChange(event) {
    this.setState({value: event.target.value});
  }

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

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

由于我工作的性质,我经常发现自己不得不实施这种形式.此外,为了简单起见,我不要求直接管理input个基本元素,也不要求直接管理add个基本元素.

推荐答案

如何动态添加/删除输入元素?

是的,这是可能的,您可以添加/删除input个元素dynamically,但为此,您需要注意几件事:

1-事件的适当绑定.

2-数组,分别存储每个输入元素的值.

3-当用户在任何输入元素中填充值,然后只更新状态中的特定值时.

Logic:

在状态内部维护一个数组,该数组将存储值.使用100 for each 数组值创建ui(输入元素).在创建字段时,对每个字段使用remove button,并在function中传递字段索引,它将帮助您确定要删除的字段,对onChange也执行同样的操作.

判断以下示例:

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

  createUI(){
     return this.state.values.map((el, i) => 
         <div key={i}>
    	    <input type="text" value={el||''} onChange={this.handleChange.bind(this, i)} />
    	    <input type='button' value='remove' onClick={this.removeClick.bind(this, i)}/>
         </div>          
     )
  }

  handleChange(i, event) {
     let values = [...this.state.values];
     values[i] = event.target.value;
     this.setState({ values });
  }
  
  addClick(){
    this.setState(prevState => ({ values: [...prevState.values, '']}))
  }
  
  removeClick(i){
     let values = [...this.state.values];
     values.splice(i,1);
     this.setState({ values });
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.values.join(', '));
    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'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='container'/>

判断工作状态jsfiddle:https://jsfiddle.net/mayankshukla5031/ezdxg224/

Reactjs相关问答推荐

使用React.lazy组件防止 children 在数据更改时重新加载

如何在useEffect中使用useParams()

条件索引路由

如何在关闭和打开此 Select 输入时应用旋转效果?

通过单击具有此值的按钮将值添加到数组对象键

如何在MUI X数据网格列中显示IMG?

更改购物车中的产品数量后,PayPal Reaction/Next JS按钮未更新

XChaCha20-Poly1305的解密函数

错误./src/TopScroll.js 31:21-31导出';(作为';随路由导入)在';Reaction-Router-Dom';中找不到

React:关于useEffect钩子如何工作的困惑

React,当我调用handleSubmit()函数时,我正在将application/json和multiform/data中的数据发送到后端,但student_image中没有数据:null

蚂蚁 Select .列表弹出窗口不会';有时不会出现

单击按钮不会切换组件(当按钮和组件位于两个单独的文件中时)

是的验证:使用 useFieldArray 访问表单值

React Router 6 点击链接在 React 18 应用中打开 flickr 页面

未捕获的运行时错误:对象作为 React 子项无效

为什么刷新页面时我的localStorage PET值变成空字符串?

React + i18next + Trans + Prettier:Prettier 最终会在重新格式化 JSX 时 destruct 翻译

用 jest 测试包裹在 redux 和 router 中的组件

如何在 React 中单击鼠标的位置动态添加 div?