时间戳

首页 > 解决方案 > 在带有键值的反应 js 中添加多个输入

reactjs - 在带有键值的反应 js 中添加多个输入

问题描述

我正在学习反应，我有一个要求，比如在 addItem 和显示中添加名称、类型和业务。

constructor(props){
    super(props);
    this.state={
    items:[],
    currentDetails:{
    text:'',
    key:''
   }
  }
  this.handleInput = this.handleInput.bind(this);
  this.addItem = this.addItem.bind(this);
  this.deleteLog = this.deleteLog.bind(this);
  }. 

 addItem(e){
e.preventDefault();
const newDetails = this.state.currentDetails;
console.log(newDetails);

if(newDetails.text !== ""){
  const newItems = [...this.state.items,newDetails];
  this.setState({
    items:newItems,
    currentDetails: {
      text:'',
      key:''
    }
      })
  }
 }

    handleInput(e){
    this.setState({
    currentDetails:{
    text:e.target.value,
    key:Date.now()
    }
   })
   }


 <form onSubmit={this.addItem}>
 <div>
     <label>customer Name</label>
         <div>
             <input type="text" value={this.state.currentDetails.name} onChange={this.handleInput}/>
         </div>
  </div>
   <div>
     <label>Customer Business</label>
         <div>
             <input type="text" value={this.state.currentDetails.business} onChange=.    {this.handleInput}/>
         </div>
  </div>
<div>
     <label>Type</label>
          <div>
             <select>
                <option>1</option>
                <option>2</option>
             </select>
          </div>
  </div>
 </form>

我能够处理一个输入，但不知道如何处理多个输入。我在另一个页面中显示这些输入，并使用键值删除每个客户的详细信息。

标签： reactjs

解决方案

输入字段的名称和状态变量的键应该相同

    import React from "react";

export default class AnyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: {
        input1: "",
        input2: "",
      },
    };
  }

  handleChange = (e) => {
    const { name, value } = e.target;
    this.setState({
      items: { ...this.state.items, [name]: value },
    });
    console.log(this.state);
  };

  render() {
    return (
      <>
        <input
          name="input1"
          value={this.state.input1}
          onChange={this.handleChange}
        />
        <input
          name="input2"
          value={this.state.input1}
          onChange={this.handleChange}
        />
      </>
    );
  }
}

推荐阅读