javascript - setState 和 JSX props 不应使用箭头函数

Question

我在这里读过类似的问题

Why shouldn't JSX props use arrow functions or bind?

JSX props should not use .bind() - how to avoid using bind?

No .bind() or Arrow Functions in JSX Props making no sense to me when I need to pass arguments

我了解使用箭头函数如何导致在每次渲染和效果性能上重新创建该函数。但是我仍然不完全理解如何在 React Native 中解决这个问题，特别是在使用 setState 时。

例如，如果我有一个 TextInput 更新 onChangeText 函数中组件状态中保存的值，如何避免使用箭头函数？

<TextInput
  value={this.state.text}
  onChangeText={text => this.setState({ text })}
  />

我必须为我想要更新的状态中的每个属性创建一个处理程序吗？例如，如果我有两个 TextInput 字段“电子邮件”和“密码”，是否需要这样处理？

  updateEmail = email => {
    this.setState({ email })
  }

  updatePassword = password => {
    this.setState({ password })
  }

  render() {
  ...
  <TextInput
      value={this.state.email}
      onChangeText={this.updateEmail}
      />
  <TextInput
      value={this.state.password}
      onChangeText={this.updatePassword}
      />

Answer 1

您可以将元素的 id 或名称设置为与状态变量的名称相同。因此，您可以创建一个函数并将其传递给所有输入，例如:

onFieldChange = (e) => {
    const key = e.target.id
    const value = e.target.value
    this.setState({[key]:value})
}