如何在ReactJS中添加一个按钮组件？

Question

所以我已经成功地从一个数组'values': ["hello", "world]中呈现出组件，但我想添加一个按钮组件，以便每次单击它时，都会显示另一个空字段。它目前的样子是这样的： 但我希望有一个按钮，每次单击它，就会呈现出另一个空组件来输入文本。在my array_node.jsx文件中直接添加一个button组件是否正确？到目前为止，我所做的是否正确？我还需要在var AddButton = React.createClass({})中添加某种形式的newInput: function()吗？谢谢！

{...
    childChange: function(name, valid, value) {

        // update state
        this.state.values = this.props.values;

        // Using regex to find last digits from 0-9
        var pattern = /[0-9]/;
        var match = name.match(pattern);

        // Parse char into int
        var i = parseInt(match);

        this.state.values[i] = value;
        this.setState(this.state);

        // Call parent callback
        this.props.callback(
            this.props.name,
            this.props.node.valid(this.state.values),
            this.state.values
        );
    },
    addItem: function(values){
    },

        render: function() {
            var that = this;

            return (
                <div id = "form">
                {this.props.values.map(function(v, i) {
                    return (
                        <div>
                        {(that.props.node.get().constructor.name === "Parent") ?
                        <ParentComponent
                            name={that.props.name + i}
                            key={i}
                            timer={that.props.timer}
                            callback={that.childChange}
                            values={v}
                            newParent={that.props.node.get()}
                        />
                        :
                        <NodeComponent
                            name={that.props.name + i}
                            key={i}
                            timer={that.props.timer}
                            callback={that.childChange}
                            value={v}
                            newNode={that.props.node.get()}
                        />
                        }
                        </div>
                    )
                })}
                </div>
           )
        }
    });
    return ArrayNodeComponent


var AddButton = React.createClass({
    addItem: function() {

    },

    render: function() {

        return(
        <div id="create_new_entry">

        </div>
        )
    }
})

格式化:

var props = {
    'name' : 'form',
    'timer' : 1500,
    'callback' : function(id, validity, value) {console.log(id, validity, value);},
    'values': ["hello", "world"],

    'node' : new FormatOC.ArrayNode({"__array__":"unique", "__type__":"string","__minimum__":1,"__maximum__":200,"__component__":"Input"},
    )
}

React.render(React.createElement(ArrayNodeComponent, props), document.getElementById('react-component'));

- Sam

---

你的代码似乎非常过时。你使用React.createClass而不是es6类有原因吗？如果你正在学习react，我强烈建议使用es6语法。除了一些奇怪的项目要求外，我几乎没见过任何人编写这样的react代码已经很久了。 - trixn

完全同意@trixn所说的，看起来你可能需要阅读一些更现代的例子，看看React文档，它们非常适合入门 https://reactjs.org/tutorial/tutorial.html - Ben Lonsdale

Answer 1

你可以在表单的渲染函数中添加一个按钮。

然后监听点击事件，并在值列表中添加一个新的空元素。

如果您希望将更改传播到某个父组件，您需要从父组件传递 onClick 处理程序，并在那里更新值列表。

import { Component } from 'react';

class ArrayNodeComponent extends Component {

  // other code ...
  // like your initialisation of your state
  // and other functions

  addEmptyItem() {
    const { values } = this.state;
    this.setState({
      values: [...values, ""]
    });
  }

  render() {
    return (
      <form id="test">
        {
          /* this is your values map routine, shortened */
          this.props.values.map(function(v, i) { /*...*/ })
        }
        <button onClick={() => this.addEmptyItem()}>Add</button>
      </form>
    );
  }

}

顺便说一下，在这种简单的情况下，创建一个自定义的按钮组件没有意义。

- Luke