Question

在我的EditRecipeForm组件中，在模态中编辑文字时，我得到Uncaught TypeError: this.setState is not a function，因为this指的是模态窗口，而不是＆＃34; app＆＃34; ，我不明白的是如何让this正确，以便编辑字段值更新实际上是有效的。（我删除的代码不直接相关），完整演示可在此处获取：http://codepen.io/pdewouters/pen/adLpvQ

const Button = ReactBootstrap.Button,
      Accordion = ReactBootstrap.Accordion,
      Panel = ReactBootstrap.Panel,
      Modal = ReactBootstrap.Modal,
      Input = ReactBootstrap.Input,
      ButtonToolbar = ReactBootstrap.ButtonToolbar,
      ButtonInput = ReactBootstrap.ButtonInput,
      ListGroup = ReactBootstrap.ListGroup,
      ListGroupItem = ReactBootstrap.ListGroupItem

class App extends React.Component {

    constructor(props){
      super(props)
      this.state = {
        showModal: false,
        showEditModal: false,
        recipes: [],
        recipeName: '',
        ingredients: '',
        editRecipeNameInputVal: '',
        editIngredientsInputVal: '',
        recipeToEdit: {recipeName:'',ingredients:''}
      }
    }

    closeEditModal(){
      this.setState({ showEditModal: false })
    }

    openEditModal(recipe){
      this.setState({showEditModal:true,recipeToEdit:recipe})
    }

    handleRecipeEditInputChange(value){
      this.setState({editRecipeNameInputVal: value})
    }

    handleIngredientsEditInputChange(value){
      this.setState({editIngredientsNameInputVal: value})      
    }

    render(){
        return(
            <div className="container">
                <div className="page-header">
                  <h1>Recipes</h1>
                </div>
                <div className="row">
                  <div className="col-md-12">


                    <EditRecipeForm
                     showModal={this.state.showEditModal}
                     closeModal={this.closeEditModal.bind(this)}
                     handleSubmit={this.handleEditFormSubmit.bind(this)}
                     handleRecipeEditInputChange={this.handleRecipeEditInputChange.bind(this)}
                     handleIngredientsEditInputChange={this.handleIngredientsEditInputChange.bind(this)}
                      recipe={this.state.recipeToEdit}
                      handleRecipeEditInputChange={this.handleRecipeEditInputChange}
                      handleIngredientsEditInputChange={this.handleIngredientsEditInputChange} />   
                    <RecipeList recipes={this.state.recipes}
                      handleDeleteRecipe={this.handleDeleteRecipe.bind(this)}
                      handleOpenEditModal={this.openEditModal.bind(this)}
                      />

                  </div>
                 </div>
            </div>
        )
    }
}

class RecipeList extends React.Component {
  handleOpenEditModal(recipe,event) {
    this.props.handleOpenEditModal(recipe)
  }
    render(){
        let recipes = this.props.recipes.map((recipe,index)=>{
          return (
            <Panel header={recipe.recipeName} eventKey={index}>
              <IngredientsList ingredients={recipe.ingredients} />
            <ButtonToolbar>
              <Button bsStyle="danger" onClick={this.props.handleDeleteRecipe.bind(null,index)}>Delete</Button>
              <Button bsStyle="primary" onClick={this.handleOpenEditModal.bind(this,recipe)}>Edit</Button>
            </ButtonToolbar>

            </Panel>
          )

      })
      return (
        <Accordion>
          {recipes}
        </Accordion>
      )
    }
}

class EditRecipeForm extends React.Component {
  handleRecipeEditInputChange(e){
    this.props.handleRecipeEditInputChange(e.target.value)
  }
  handleIngredientsEditInputChange(e){
    this.props.handleIngredientsEditInputChange(e.target.value)
  }
    render(){
        return(
          <Modal show={this.props.showModal} onHide={this.props.closeModal}>
            <Modal.Header closeButton>
              <Modal.Title>Edit recipe</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <form onSubmit={this.props.handleSubmit}>
                <Input type="text"
                  label="Recipe"
                  placeholder="blueberry pancakes"
                  value={this.props.recipe.recipeName}
                  onChange={this.handleRecipeEditInputChange.bind(this)} />

                <Input type="textarea"
                  label="Ingredients"
                  placeholder="milk,sugar,flour,butter,blueberries"
                  value={this.props.recipe.ingredients}
                  onChange={this.handleIngredientsEditInputChange.bind(this)} />

                <ButtonInput type="submit" value="Save changes" />
              </form>
            </Modal.Body>
            <Modal.Footer>
              <Button onClick={this.props.closeModal}>Close</Button>
            </Modal.Footer>
          </Modal>
        )
    }
}

React.render(<App />, document.querySelector('.app'))

Answer 1

看起来你正在传递handleRecipeEditInputChange和handleIngredientsEditInputChange道具回调两次，第二次你没有绑定到组件实例。

<EditRecipeForm
    showModal={this.state.showEditModal}
    closeModal={this.closeEditModal.bind(this)}
    handleSubmit={this.handleEditFormSubmit.bind(this)}

    handleRecipeEditInputChange={this.handleRecipeEditInputChange.bind(this)}
    handleIngredientsEditInputChange={this.handleIngredientsEditInputChange.bind(this)}
                      recipe={this.state.recipeToEdit}

    handleRecipeEditInputChange={this.handleRecipeEditInputChange}
    handleIngredientsEditInputChange={this.handleIngredientsEditInputChange} />

第二个道具将覆盖第一个道具，因此请尝试删除第二个道具。

如何制作这个＆＃39;参考App，而不是模态

1 个答案: