时间戳

首页 > 解决方案 > 不在状态中设置属性？

javascript - 不在状态中设置属性？

问题描述

在我看过的所有教程中，状态属性都设置为空字符串、数组等，所以我认为这是最佳实践。

那么通过事件处理程序设置状态属性是不好的做法吗？

class Form extends Component {
  state = { };

  handleOptionChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {
    return (
      <div>
        <form>
          <label>
            <input
              type="radio"
              name="size"
              value="small"
              checked={this.state.size === "small"}
              onChange={this.handleOptionChange}
            />
            Small
          </label>
          <label>
            <input
              type="radio"
              name="size"
              value="large"
              checked={this.state.size === "large"}
              onChange={this.handleOptionChange}
            />
            Large
          </label>
        </form>
      </div>
    );
  }
}

export default Form;

代码工作得很好，每次选择输入时都会更新状态。

标签： javascriptreactjs

解决方案

你写的东西会很好用。出于以下几个原因，在 state 中设置初始值被认为是最佳实践：

  1. 组件在初始化时有一个默认值

  2. 任何阅读代码的人都知道对state属性（及其类型）的期望

    class Form extends Component {
  state = {
    size: 'small'
  }
  ...
}

这将默认设置this.state.size为'small'。如果您不想要默认值，最好设置一个与您希望该 state 属性具有的相同类型的空值。

换句话说，如果您希望this.state.size它是一个字符串，但您不希望它具有默认值，state = { size: '' }则会发送消息“此状态具有一个size属性，我们可以期望它是一个字符串”

推荐阅读