Javascript 单击按钮时添加输入字段

我有一个添加配方的表格，里面有配料按钮。一份食谱可以有很多成分。单击该按钮时，用于添加配料的输入字段应显示在配料按钮下方。我想做的是什么

从“/Input.jsx”导入输入；
导出默认类扩展组件{
构造函数（）
{
超级（）；
此.state={
输入值：{}
}
this.onHandleSubmit=this.onHandleSubmit.bind（this）；
}
onChange（名称，{target:{value}}）
{
const inputValues=this.state.inputValues；
inputValues[名称]=值；
this.setState（{inputValues}）
}
onHandleSubmit（）
{
console.log（'clicked'）；
const name=`ingrediant-${Object.keys（this.state.inputValues.length}`；
让输入框=
}
提交（事件）{
event.preventDefault（）；
}
render（）{
返回(
添加配方
菜名
附加成分
{this.state.inputValues}
提交
);
}
}

---

单击按钮时，如何为配料创建新的动态（新创建的输入框的不同参考）输入字段？

在您的情况下，我会将输入设置为单独的组件，如

class Input extends Component
{

    render()
    {
      const { name, onChange } = this.props;
      return(<div className="row">
                <div className="input-field col s12">
                  <input id={name} 
                         type="text" 
                         className="validate flow-text" 
                         onChange={ this.props.onChange } />
                  <label htmlFor={name}>Name of Recipe</label>
                </div>
         </div>)
    }

}

---

在这种情况下，您不必保留

refs

@AvraamMavridis来发送到服务器。因为如果用户添加了5种成分，那么所有这5种成分都应该有不同的ref发送到服务器。如果我错了，请纠正我？我看不到它被使用过，你在任何地方都不能执行

此操作。refs

我还没有完成提交任务，因为我无法在单击按钮时添加配料字段。我在我的注册页面中使用了ref，如下所示：让email=this.refs.email.value.trim（）；设password=this.refs.password.value.trim（）；让confirmPassword=this.refs.confirmPassword.value.trim（）；if（password===confirmPassword&&password！==”&&confirmPassword！==”{let Info={email:email，password:password}；Accounts.createUser（Info，（er）=>{if（er）{…}else{FlowRouter.go（'/'）；}}}else}点击成分按钮后，新的输入字段没有出现。我收到此错误未捕获不变冲突：对象作为React子对象无效（找到：具有键{}的对象）。@milan您必须渲染它，我没有将它添加到我的答案中以使其更简短，您可以执行类似于

this.state.inputs.push（）

的操作，然后在渲染函数中使用

map

。像

{this.state.inputs.map（i=>i）}

是的，它工作了。谢谢您删除了Object.keys（）。我可以知道原因吗？使用Object.keys时，名称未更新为新长度，但现在正在更新为新长度。

class Input extends Component
{

    render()
    {
      const { name, onChange } = this.props;
      return(<div className="row">
                <div className="input-field col s12">
                  <input id={name} 
                         type="text" 
                         className="validate flow-text" 
                         onChange={ this.props.onChange } />
                  <label htmlFor={name}>Name of Recipe</label>
                </div>
         </div>)
    }

}

class Sell extends Component
{
    constructor()
    {
        super();
        this.state = {
          inputValues = {},
          inputs : []
        }
    }

    onChange( name, { target : { value } })
    {
         const inputValues = this.state.inputValues;
         inputValues[name] = value;
         this.setState({ inputValues })
    }

    onHandleSubmit()
    {
        const name = `incrediant-${this.state.inputs.length}`;
        let inputbox = <Input name={ name }
                              key={this.state.inputs.length}
                              onChange={ this.onChange.bind(this, name )} />

       const inputs = this.state.inputs;
       inputs.push( inputbox );
       this.setState( { inputs } );

    }

   ...
   ....

   render()
   {
       ...
       ...
       {
           this.state.inputs.map( i => i );
       }
   }

}