reactjs - 如何在组件外部更改组件的状态？

Question

在接下来的几行中，我将描述如何创建更清晰和抽象的方法来管理代码中的 onChange 处理(而不仅仅是)。

后来我发现了这个模式:

class A extends React.Component {
  constructor(props) {...}

  handleText1Change = (e) =>
    this.setState(prevState => ({
      text1: e.target.value
    }))

  handleText2Change = (e) =>
    this.setState(prevState => ({
      text2: e.target.value
    }))

  render() {
    return (
      <div>
        <input
          type="text"
          onChange={this.handleText1Change}
        />
        <input
          type="text"
          onChange={this.handleText2Change}
        />
      </div>
    )
  }
}

为组件中的每个输入编写一个处理函数非常烦人，并且它粗略地违反了DRY原则(不要重复自己)。所以我重构了它并得到以下结果:

class A extends React.Component {
  constructor(props) {...}

  handleInputChange = (value, property) =>
    this.setState(prevState => ({
      [property]: value
    }))

  render() {
    return (
      <div>
        <input
          type="text"
          onChange={e => this.handleInputChange(e.target.value, 'text1')}
        />
        <input
          type="text"
          onChange={e => this.handleInputChange(e.target.value, 'text2')}
        />
      </div>
    )
  }
}

更干净、更可重用。但是如果我需要在其他几个组件中使用相同的功能怎么办？

Answer 1

类似的方法，但您还可以将实用程序函数绑定(bind)到构造函数中的组件实例，以避免必须将 this 作为参数传递。您还可以在 handleInputChange 中使用闭包，使其用法更加简洁:

function handleInputChange (property) {
  return (e) => {
    this.setState({ [property]: e.target.value })
  }
}

class A extends Component {
  constructor (props) {
    super(props)

    this.handleInputChange = handleInputChange.bind(this)
  }

  render () {
    return (
      <div>
        <input type="text" onChange={this.handleInputChange('text1')} />
      </div>
    )
  }
}