React JS(Bootstrap)表单保存在本地存储中的所有输入，而不是使用OnSubmit

Question

在此处进行react js的新事物，并尝试制作表单（以模式为单位），以将文本输入和文本区域的提交保存到本地存储。这两个输入的值映射到我的形式状态。我的表单组件具有带有OnSubmit函数的按钮，该按钮应将对象发送到本地存储，一旦用户单击它。但是，发生的事情是，当用户单击按钮时，它保存了我作为本地存储的单独输入的每个字母，而不是整个内容。我在这里做错了什么？

所以假设我要保存 {name: "oatmeal", ingredients: ["milk, "oat"]}，它保存：

{name: "o", ingredients: []}
{name: "oa", ingredients: []}
{name: "oat", ingredients: []}

等。当我输入....

这是我的代码：

var App = React.createClass({

  render: function(){
    return( 
      <div className="container">
        <h1>Recipe Box</h1>
        <AddRecipeButton />
      </div>
    )  
  }

});

var AddRecipeButton = React.createClass({

  getInitialState(){

    return {showModal: false};
  },
  close: function(){
    this.setState({showModal:false});
  },
  open: function(){
    this.setState({showModal:true});
  },
  render: function(){ 
    return (
      <div>
        <Button bsStyle="warning" bsSize="large" onClick={this.open}>
            Add Recipe
        </Button>
        <Modal show={this.state.showModal} onHide={this.close}>
            <Modal.Header closeButton>
              <Modal.Title>Add a Recipe Here</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <Form />
            </Modal.Body>
        </Modal>
      </div>

      )
  }
});
var Form = React.createClass({
  getInitialState(){

    return {
      name: "", 
      ingredients: [ ]
    };
  },
  getValidationStateName(){
    var length = this.state.name.length;
    if(length > 0) {
      return "success";
    } else {
      return "error";
    }
  },
  getValidationStateIngredients(){
    var length = this.state.ingredients.length;
    if(length > 0){
      return "success";
    } else {
      return "error";
    }

  },
  handleInput: function(key,e){

    var input = e.target.value;

    if(key === "ingredients"){
        input = e.target.value.split(",");  
    }
    var update = {};
    //create object to merge with state
    update[key] = input;
    //set the value of input field to update object
    console.log(update);
    this.setState(update, function(){
    //merge the object into the state  
      console.log(this.state);
    });

  },
  handleSubmit(){
    var recipe = JSON.stringify(this.state);
    localStorage.setItem(this.state.name, recipe);
  },
  render: function(){

    return (
      <form>
        <FormGroup controlId="formNameText" validationState = {this.getValidationStateName()}>
          <ControlLabel>Recipe</ControlLabel>
          <FormControl
            type="text"
            placeholder="Give your recipe a name"
            value={this.state.name}
            onInput={this.handleInput.bind(this,'name')}
            />
          <FormControl.Feedback /> 
        </FormGroup>  
          <br/>
        <FormGroup controlId="formIngredientsTextarea" validationState = {this.getValidationStateIngredients()}>
          <FormControl
            componentClass="textarea"
            placeholder="Insert your ingredients, separated by a comma"
            value={this.state.ingredients}
            onInput={this.handleInput.bind(this,'ingredients')}
          />  
          <FormControl.Feedback /> 
          <hr/>
        </FormGroup>
        <Button bsStyle="primary"  onSubmit={this.handleSubmit()}>Submit</Button>
      </form>  

    );
  }
});
ReactDOM.render(<App />, document.getElementById('app'));

Answer 1

尝试将<Button bsStyle="primary" onSubmit={this.handleSubmit()}>Submit</Button>更改为<Button bsStyle="primary" onSubmit={this.handleSubmit.bind(this)}>Submit</Button>

Answer 2

执行此操作时，

<Button bsStyle="primary" onSubmit={this.handleSubmit()}>Submit</Button>

您实际上将调用每个渲染上的函数handleSubmit()，而应仅通过功能原型。

<Button bsStyle="primary" onSubmit={this.handleSubmit}>Submit</Button>

nota bene ：当使用 React.createClass创建组件时，您在组件方法上不需要.bind(this)（除非您想用参数.bind(this, params)调用它们）;组件方法是由React自动绑定的。