Question

我有新的反应，我想创建一个React表单，其中包含添加和删除输入字段的选项。最初我在

状态下将输入字段数设置为5

this.state = {
        rowValues : ['','','','',''],activities : '' }

我通过地图功能

渲染它们

<Row>
 {this.state.rowValues.map((newrow)=>{
   return (
     <Col sm={12}>   
       <Row className="form-row">
         <Col sm={12}>
            <div className="form-input">
               <InputGroup>
                 <InputGroup.Addon className="activity-ul"><i className="fa fa-circle"></i></InputGroup.Addon>
                   <FormControl type="text" name="ngo-activities-undertaken" placeholder="activities" value={this.state.activities} onChange={this.handleChange.bind(this,'activities')}></FormControl>
               </InputGroup>
            </div>
          </Col>
        </Row>
      </Col>)
     })
   }  
</Row>

对于每个输入字段，我必须有一个单独的活动值。现在我得到所有输入字段的相同状态。那么我如何有一个单独的激活状态，当添加新的输入字段时也必须添加该状态，并在删除输入字段时删除。

整个代码在

之下

          render(){
           return(
<Row className="form-row">
                    <Col sm={8} className="form-activities-undertaken">
                         <div className="form-label">
                            <ControlLabel className="label">Enlist activities undertaken as part of this project<span className="star"> * </span></ControlLabel>
                        </div>
                    </Col> 
                    <Col sm={2}>

                        <Button className="add-activity" onClick={this.addrow.bind(this)} bsSize="sm"> <i className="fa fa-plus"></i> Add</Button>
                    </Col>
                    <Col sm={2}>
                        <Button className="delete-activity" onClick={this.deleterow.bind(this)} bsSize="sm"><i className="fa fa-minus"></i> Remove</Button>
                    </Col>
                </Row>
                <Row>
                    {this.state.rowValues.map((newrow)=>{
                            return (
                                <Col sm={12}>   
                                    <Row className="form-row">
                                        <Col sm={12}>
                                            <div className="form-input">
                                                <InputGroup>
                                                    <InputGroup.Addon className="activity-ul"><i className="fa fa-circle"></i></InputGroup.Addon>
                                                    <FormControl type="text" name="ngo-activities-undertaken" placeholder="activities" value={this.state.activities} onChange={this.handleChange.bind(this,'activities')}></FormControl>
                                                </InputGroup>
                                            </div>
                                        </Col>
                                    </Row>
                                </Col>)
                            })
                        }  

                </Row> );}

handleChange函数是

handleChange(name, e){
    this.setState({ [name] : e.target.value })
}

addrow和deleterow函数：

    addrow(){
    console.log("the addrow button clicked");
    var newRow =[];
    newRow = this.state.rowValues;
    newRow.push('')
    this.setState({rowValues : newRow})

} 

deleterow(){
    console.log("the deleterow button is clicked");
    var delrow = [];
    delrow = this.state.rowValues;
    delrow.pop();
    this.setState({rowValues : delrow})
}

请帮帮我。谢谢。）

Answer 1

如果你想为每个字段同时拥有行值和活动值，那么你的状态应该是一个对象数组，每个输入一个。

当您有新输入时，您应该使用以下内容更新状态：

newInput = { row: rowValue, activities: actValue};
this.setState(oldState => 
  ({ inputArray: [...oldState.inputArray, newInput] }));

要删除元素，请定义一个新数组，该数组是旧数组的副本，找到要从数组中删除的元素的索引，然后使用splice将其删除。将新数组设置为状态。

在React中创建一个State数组

1 个答案: