如何在本机反应中获取 TextInput 更改事件的目标？答案

【问题标题】：How to get the target of the TextInput change event in react native?如何在本机反应中获取 TextInput 更改事件的目标？
【发布时间】：2018-12-11 00:18:26
【问题描述】：

我有一系列 TextInput 组件，这些组件是根据地图中的条目数动态生成的。我正在尝试为每个 TextInput 独立设置我的状态，但无法完全弄清楚。这是我的代码：

<View style={{ flex: 1 }}>
                <ScrollView contentContainerStyle={{ paddingVertical: 20 }}>
                    {ostDataPoints.map(({ ostDPID, ostDPName, ostDPUOM }) => (
                        <Card title={`${ostDPName}(${ostDPUOM})`} key={ostDPID} >
                            <Text style={{ marginBottom: 10 }}>
                                Test Name: {ostDPID}
                            </Text>
                            <Text style={{ marginBottom: 10 }}>
                                Test Type: {ostDPUOM}
                            </Text>
                            <TextInput
                                style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
                                onChangeText={(text) => this.setState({ text })}
                                value={this.state.text}
                            />
                            <Button
                                backgroundColor="#03A9F4"
                                title="VIEW NOW"
                                onPress={() => {
                                    alert("hi");
                                }}
                            />
                        </Card>
                    ))}
                </ScrollView>
            </View>

我想做这样的事情（来自反应）：

handleTextChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        })
    }

有没有办法可以在 react native 中设置这个 event.target.name 值？

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

您可以使用 id 或 name 属性来识别正在更改的输入。例如以下代码：

开启CodeSandbox

index.js

import React from "react";
import ReactDOM from "react-dom";
import MyInput from "./MyInput";

import "./styles.css";

const items = [{ name: "first" }, { name: "second" }, { name: "third" }];

class App extends React.Component {
  onTextChange(id, value) {
    console.log(id, value);
  }

  render() {
    return (
      <ul>
        {items.map(item => (
          <li>
            <MyInput
              name={item.name}
              textChange={(id, value) => this.onTextChange(id, value)}
            />
          </li>
        ))}
      </ul>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

MyInput.js

import React from "react";

export default class MyInput extends React.Component {
  textChange(event) {
    this.props.textChange(this.props.name, event.target.value);
  }

  render() {
    return (
      <input
        type="text"
        name={this.props.name}
        onChange={e => this.textChange(e)}
        {...this.props}
      />
    );
  }
}

【讨论】：