Question

我目前正在为购物清单创建一个小型React应用。我试图将列表项保持为状态。提交输入后，为了添加新项目，将调用一个函数，该函数将新列表发送到App并尝试将状态重置为''。由于某种原因，这是行不通的。我检查了日志记录，而且我可以判断出我的输入没有重置。

以下是代码：

class List extends React.Component {
  state = {newItem: ''};

  addItem = event => {
    event.preventDefault();

    this.props.onSubmit(this.state.newItem);
    this.setState({newItem: ''});
  }


  render() {
      return (
        <div>
          {this.props.currentUser.shoppingList.map(item => 
            <ListItem 
              {...item} 
              updatedList={this.props.updatedList}
            />)}
            <form onSubmit={this.addItem}>
              <input type="text" placeholder="Add new item!" 
                value={this.state.newItem}
                onChange={event => this.setState({newItem: event.target.value})}
              />
              <button>Save</button>
            </form>
        </div>
      );
    }
}

Answer 1

问题在于您没有将this绑定到addItem函数。

尝试更改<form onSubmit={this.addItem}>

至<form onSubmit={this.addItem.bind(this)}>

Answer 2

你的州工作得很好。您的props可能会出现问题。以下是ListItem以外的工作示例。

<!DOCTYPE html>
<html>
  <head>
    <title>React State</title>
    <meta charset="utf-8">
    <script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/jsx">
        class List extends React.Component {
            state = {newItem: ''};

            addItem = event => {
                event.preventDefault();
                console.log(this.state.newItem);
                this.setState({newItem: ''});
            }

            render() {
                return (
                    <div>
                        <form onSubmit={this.addItem}>
                          <input type="text" placeholder="Add new item!" 
                            value={this.state.newItem}
                            onChange={event => this.setState({newItem: event.target.value})}
                          />
                          <button>Save</button>
                        </form>
                    </div>
                );
            }
        }

        ReactDOM.render(
          <List />, 
          document.getElementById("app")
        );
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

this.setState实际上根本没有设置我的状态？

2 个答案: