Question

我有以下类组件：

class ConceptPopup extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            attributeForm: []
        };
        this.addAttributeForm();
    }

    addAttributeForm() {
        //this method adds label and input field to the state array 

        var array = this.state.attributeForm;

        array.push(<div>
                        <span><b>new Attribute</b></span>
                        <div>
                             <label htmlFor="name">Attribute name :</label>
                             <input name="name"/>
                        </div>
                   </div>
        );

        this.setState({
            attributeForm: array
        });
    }

    render() {
        return (
            <div>
                {this.state.attributeForm}
                <button onClick={this.addAttributeForm.bind(this)}>ADD ATTRIBUTE</button>
            </div>
        );
    }
}

现在理想的情况是每次点击ADD ATTRIBUTE按钮时都会出现一个新的输入字段。

我目前的情况是，在按钮点击时调用addAttribute方法，状态正确更新，但更改不可见。由于构造函数中的addAttributeForm，显示的所有内容都是一个输入字段。我试图在点击时强制重新渲染表单但是只会抛出一大堆错误（比如超出最大调用堆栈大小）。

Answer 1

您需要循环并渲染输入数组

render() {
      return (
          <div>
              { 
                this.state.attributeForm.map(input => {
                    return input
                })
              }
              <button onClick={this.addAttributeForm.bind(this)}>ADD ATTRIBUTE</button>
          </div>
      );
  }

Answer 2

好的，这里有几点：

在状态下更新数组时，你需要使用像slice之类的东西复制数组，并将状态设置为，不要直接引用它，然后你将直接更新状态（即var array = this.state.attributeForm.slice();）
不要将整个组件存储在状态中，存储渲染它们所需的裸骨信息（如它们的属性和数量）
请注意，如果没有密钥，您可能会遇到组件数组的问题并更新它们
如果你想从数组中的1个组件开始，只需在构造函数的this.state={}调用中设置它。不要将数组设置为空，然后调用addAttributeForm()函数，不必要的步骤
正如上面提到的Stretch0，你需要遍历数组并渲染每个元素
即使你只是在玩耍和学习东西，通常也可以给出正确的名字。调用新的表单属性数组array可能会导致混淆。最好使用像var newAttributeForm = this.state.attributeForm.slice();
虽然没有必要，但它通常更清晰，更容易绑定构造函数中的所有函数。通过这种方式，您可以跟踪其绑定，并且在删除某些功能或更改元素或其他内容时不会丢失绑定

在每个按钮上单击并添加表单元素

2 个答案: