Question

尝试通过将输入的value设置为''并清除错误TypeError: Cannot read property 'label' of null来清除输入

import React, { Component } from 'react'
import './add-item.sass'

export default class AddItem extends Component {
  state: {
    label: ''
  }

  onLabelChange = (event) => {
    this.setState({
      label: event.target.value
    })
  }

  onSubmit = (event) => {
    event.preventDefault()
    this.props.onItemAdded(this.state.label)
    this.setState({
      label: ''
    })
  }
  render() {
    return (
      <form className="add-item d-flex"
        onSubmit={this.onSubmit}>
        <input type="text"
          className="form-control add-item__input"
          onChange={this.onLabelChange}
          placeholder="new 2do"
          value={this.state.label}
        />
        <button
          className="btn btn-success"
          type="submit"
        >Add</button>
      </form>
    )
  }
}

Answer 1

请替换为：

state: { // By the way this needs to be  state=  not  state:
  label: ''
}

与

constructor () {
  super();

  this.state = {
    label: ''
  }
}

注意：在构造函数之外定义初始状态是一个不好的例子。

Answer 2

您也可以不使用构造函数。只需在状态前添加“ this”：

reduce

TypeError：无法在React中读取null的属性'label'

2 个答案: