ReactJS中如何添加按钮组件实现点击新增输入框？

Absolutely, you can add the button directly in array_node.jsx – in fact, that's the most logical place since the button needs to interact with the state of your ArrayNodeComponent. Your current approach needs a few adjustments to properly connect the button's click action to updating the input fields. Here's how to fix it:

1. Implement the addItem function in ArrayNodeComponent #

Instead of leaving the addItem function empty, update it to add a new empty entry to your values array (following React's immutable state practices):

addItem: function() {
  // Create a new array with existing values plus a new empty string
  const updatedValues = [...this.state.values, ""];
  
  // Update the state with the new array
  this.setState({ values: updatedValues }, () => {
    // Notify the parent component of the change via the callback
    this.props.callback(
      this.props.name,
      this.props.node.valid(updatedValues),
      updatedValues
    );
  });
}

2. Add the button directly in ArrayNodeComponent's render method #

You don’t need a separate AddButton component for this use case (unless you plan to reuse it elsewhere). Include the button right after your mapped input components:

render: function() {
  var that = this;
  return (
    <div id="form">
      {this.props.values.map(function(v, i) {
        return (
          <div key={i}>
            {(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>
        )
      })}
      {/* Add the button here */}
      <button onClick={this.addItem} id="create_new_entry">
        Add New Input
      </button>
    </div>
  )
}

3. A quick note on existing state management #

I noticed in your childChange function you’re mutating state directly (e.g., this.state.values[i] = value), which is a React anti-pattern. Update it to use immutable state updates too:

childChange: function(name, valid, value) {
  var pattern = /[0-9]/;
  var match = name.match(pattern);
  var i = parseInt(match);
  
  // Create a copy of the values array instead of mutating the existing one
  const updatedValues = [...this.state.values];
  updatedValues[i] = value;
  
  this.setState({ values: updatedValues }, () => {
    this.props.callback(
      this.props.name,
      this.props.node.valid(updatedValues),
      updatedValues
    );
  });
}

Do you need the separate AddButton component? #

If you don’t plan to reuse the button elsewhere, you can skip the separate AddButton class entirely. If you do want to reuse it, pass the addItem function as a prop:

var AddButton = React.createClass({
  render: function() {
    return(
      <button onClick={this.props.onAdd} id="create_new_entry">
        Add New Input
      </button>
    )
  }
})

Then use it in ArrayNodeComponent’s render method like:
<AddButton onAdd={this.addItem} />

For your current use case, keeping the button directly in ArrayNodeComponent is simpler and cleaner.

内容的提问来源于stack exchange，提问作者Sam