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

Question

So I'm rendering components from an array 'values': ["hello", "world] successfully but I would like to add a button component so that every time it gets clicked, another empty field shows up. This is what it currently looks like:

but i would like it so that there is a button and every time I click on it, it renders another empty component to input text. Would it be correct to add a button component directly inside the my array_node.jsx file? Is what I'm doing correct so far? Would I also have to add some sort of newInput: function() in side the var AddButton = React.createClass({}) ? Thank you!

array_node.jsx:

{...
    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>
        )
    }
})

formatoc:

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'));

Answer 1

You might add a button into your form within the render function. Then listen to clicks and add a new empty element to your values list.

if you would like to propagate the changes to some parent component, you would have to pass the onClick handler from the parent component and update the values list there too.

 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> ); } }

Btw in this simple scenario, it would not make sense to create a custom Button component.