Javascript setState和JSX道具不应使用箭头函数

我在这里读过类似的问题

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

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

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

this.setState（{text}）}
/>

我必须为处于要更新状态的每个属性创建一个处理程序吗？例如，如果我有两个文本输入字段Email和Password，是否需要这样处理

  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}
      />

updateEmail=email=>{
this.setState（{email}）
}
updatePassword=密码=>{
this.setState（{password}）
}
render（）{
...

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

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

---

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

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

通用方式 创建自己的TextInput组件，该组件接受

id

prop，并在调用处理程序时将其作为第二个参数传递。这是处理该组件的通用方法：

class MyTextInput extends Component {

    handleTextChange = text => {
        const {id, onTextChange} = this.props;
        return onTextChange && onTextChange(text, id);
    }

    render() {
        return (
            <TextInput {...this.props} onTextChange={this.handleTextChange}
        );
    }
}

通用方式 创建自己的TextInput组件，该组件接受

id

prop，并在调用处理程序时将其作为第二个参数传递。这是处理该组件的通用方法：

class MyTextInput extends Component {

    handleTextChange = text => {
        const {id, onTextChange} = this.props;
        return onTextChange && onTextChange(text, id);
    }

    render() {
        return (
            <TextInput {...this.props} onTextChange={this.handleTextChange}
        );
    }
}

---

我正在尝试这个方法（react-native的简单方法）。我曾经在我的TextInput中使用过类似于您的示例的方法进行过更改。但是我无法从event.nativeEvent获取名称或值。我只看到

{eventCount:1，target:277，text:（无论我键入了什么）}

。有什么想法吗？我正在尝试这个方法（react-native的简单方法）。我的TextInput中有一次更改，它是由类似于您的示例的方法处理的。但我无法从event.nativeEvent中获取名称或值。我只看到

{eventCount:1，target:277，text:（无论我键入了什么）}

。有什么想法吗？我尝试过在TextInput上设置id和名称，比如

TextInput id=“customer”name=“customer”onChange={this.onfeldchange}/>

但是onfildchange e.target.id和e.target.value是未定义的。你是如何做到的？你绑定了你的函数吗？这里有更多信息：当使用箭头函数时你不必绑定，我想？那也是绑定。我只是要求检查一下。你的e.target是完全未定义的吗？正确。我可以调用e.nativeEvent，但是在元素上设置id或名称时，at不包含id或名称。我尝试在TextInput上设置id和名称，如

TextInput id=“customer”name=“customer”onChange={this.onFieldChange}/>

但是onfildchange e.target.id和e.target.value是未定义的。你是如何做到的？你绑定了你的函数吗？这里有更多信息：当使用箭头函数时你不必绑定，我想？那也是绑定。我只是要求检查一下。你的e.target是完全未定义的吗？正确。我可以调用e.nativeEvent，但是在元素上设置时，at不包含id或name。