如何在单击按钮时切换字段？

Question

我想在单击“添加更多”时添加输入字段。之后，该按钮的图标和文本应更改为“删除”按钮。我只想一次添加这些字段。

这是我的代码：

this.state = {CustomSize: []};

addCustomSize() {
 var array = this.state.CustomSize;
 array.push(
 <Row>
   <Col>
      <Form.Label>Enter Custom Size</Form.Label>
       <Form.Control type='text' placeholder="Enter size here" />
    </Col>
 </Row>
);

this.setState({
   
 CustomSize: array,
  
});

}



return(
 <Row>
   <Col>
       <Form.Label onClick={() => this.addCustomSize()}><span class="plus_icon">+</span> Add More</Form.Label>
       </Col>
</Row>

                    {
                        this.state.CustomSize.map(input => {
                            return input
                        })
                    }
);

Answer 1

如果我没有正确理解，您只想在单击按钮时添加一次。

我不确定该字段是否会在没有数组的情况下呈现，但是我想他会

class MyComponent extends React.PureComponent {
  state = {
   field: <React.Fragment />,
   btnTitle: 'Add field',
   btnIcon: '+',
  }

  handleButton() {
    let { field, btnTitle, btnIcon } = this.state;
    if (btnIcon === '+') {
      btnIcon = '-';
      btnTitle = 'Remove field';
      field = (
        <Row>
         <Col>
          <Form.Label>Enter Custom Size</Form.Label>
          <Form.Control type='text' placeholder="Enter size here" />
         </Col>
       </Row>
      );
    } else {
      btnIcon = '+';
      btnTitle = 'Add field';
      field = <React.Fragment />
    }
    this.setState({ btnIcon, btnTitle, field });
  }

  render() {
   cosnt { field, btnTitle, btnIcon } = this.state;
   return(
    <Row>
     <Col>
       <Form.Label onClick={() => this.handleButton()}><span class="plus_icon">{btnIcon} </span>{btnTitle}</Form.Label>
       </Col>
       { field }
    </Row>
   );
  }
}