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

类似的方法，但您也可以将实用程序函数绑定到构造函数中的组件实例，以避免必须传入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>
    )
  }
}

Answer 2

我设法通过传递 this ：

的引用来做到这一点

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

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

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

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

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

您如何看待这种方法？你如何处理代码中的类似模式？

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

2 个答案: