Question

我这里有一个代码，我必须在其中执行更新操作。我正在根据get操作的结果动态生成表单字段。表单字段已预先填充。触发错误数据时，输入字段上发生更改事件时，按键不起作用。我可以更改具有不同名称的单个字段。但是无法更新json数组状态。请帮忙。我已经在下面附上了代码片段。

export default class PocDetail extends React.Component {
 constructor(props) {
  super(props);
   this.state={
     isLoading:true,
     editData:[],
   };
 }


 componentDidMount(){
   this.renderData();
 }

 renderData(){
  var self = this;
  const getOrgId = 
  window.location.href.substr(window.location.href.lastIndexOf('/') + 1);
  const url = "some api";
  get(url+"Organisation/"+getOrgId+"/pointOfContacts/").then(function (response) {
   console.log(response.data);
   self.setState({
     editData:response.data,
     isLoading:false
   })
 }).catch(function (error) {
    console.log(error);
   });
 }

 putData =(e)=>{
    e.preventDefault();
 }


//edit permission for input fields
  inputChangedHandler = (event) => {
  this.setState({ editData: { ...this.state.editData,[event.target.name]:event.target.value} });
  // May be call for search result
  }


 //the view
 render() {
   const {isLoading,editData} = this.state;
   if(isLoading){
    return <Loader />;
   }
   return (
    <div>
     <Row style={{paddingTop:'20px',paddingBottom:'40px',marginLeft:'auto',marginRight:'auto'}}>
        <Col lg="8" md="8" sm="8">
          <Form id="bankForm" onSubmit={this.putData}>
            <ToastContainer store={ToastStore}/>
            {
              editData.map(data=>{
              return(<Row key={data.id}>
                <Col lg="6" md="6" sm="6">
                  <FormGroup>
                    <Label className="createLabelStyle" for="title">Title</Label>
                    <Input className="createInputStyle" type="text" name="title" id="title" autoComplete="off" value={data.title} onChange={(event)=>this.inputChangedHandler(event)} required/>
                  </FormGroup>
                  <FormGroup>
                    <Label className="createLabelStyle" for="first_name">First name</Label>
                    <Input className="createInputStyle" type="text" name="first_name" id="first_name" value={data.first_name} onChange={(event)=>this.inputChangedHandler(event)} autoComplete="off" required/>
                  </FormGroup>
                  <FormGroup>
                    <Label className="createLabelStyle" for="contact_number">Contact Number</Label>
                    <Input className="createInputStyle" type="text" name="contact_number" id="contact_number" autoComplete="off" value={(data.contact_number==null)?"":data.contact_number} onChange={(event)=>this.inputChangedHandler(event)} required/>
                  </FormGroup>
                </Col>
                <Col lg="6" md="6" sm="6">
                  <FormGroup>
                    <Label className="createLabelStyle" for="email">Email ID</Label>
                    <Input className="createInputStyle" type="text" name="email" value={data.email} onChange={(event)=>this.inputChangedHandler(event)} id="email"  autoComplete="off" required/>
                  </FormGroup>
                  <FormGroup>
                    <Label className="createLabelStyle" for="last_name">Last name</Label>
                     <Input className="createInputStyle" type="text" name="last_name" value={data.last_name} onChange={(event)=>this.inputChangedHandler(event)} id="last_name"  autoComplete="off" required/>
                   </FormGroup>
                 </Col>
             </Row>);
               })
             }
             <Button className="createSubmitStyle">Add</Button>{' '}
             <Button className="createSubmitStyle">Update</Button>
           </Form>
         </Col>
     </Row>
   </div>
  );
 }
}

Answer 1

在renderData函数变量editData中是一个数组，这就是为什么它正确呈现表单的原因，但是在inputChangedHandler函数中，您正在将editData更新为对象，因此出现问题

Answer 2

请尝试以下代码段：

editData！= undefined && editData.map（data => {}）;

Answer 3

我找到了解决方案。在下面添加此代码即可解决该问题。我需要在地图上添加索引以更新对象的属性值。

  inputChangedHandler(i,event){
    let data = [...this.state.editData];
    data[i][event.target.name] = event.target.value;
    console.log(data[i][event.target.name]);
    this.setState({editData:data});
  }

如何在React JS中更新动态生成的表单

3 个答案: