javascript - 将自定义 Prop 提供给TextInput并在事件处理程序上使用

我是新来的响应本机并尝试事件处理的人，并提出了一个问题。

假设我有这样的代码

class Demo extends React.Component {
  constructor(props) {
    this.textValues = {a: null, b: null};
  }

  handleChange(event) {
    this.textValues['a'] = this.props.customProps;
    this.textValues['b'] = event.nativeEvent.text;
  }

  render() {
    return (
      <View>
        <TextInput
          customProps = 'T1'
          onChange = {this.handleChange.bind(this)}
        />
        <TextInput
          customProps = 'T2'
          onChange = {this.handleChange.bind(this)}
        />
      </View>
    )
  }
}

我想从父组件访问TextValues，即Demo和TextInput的customProps，但是


如果我将其与handleChange绑定在一起，则此引用将对Demo类和this.props.customProps给出未定义
如果我不将其与handleChange绑定，则未定义this.textValues，并且this.props.customProps提供了完美的价值


但是我想在handleChange函数中同时访问Demo的textValues和TextInput的customProps。

最佳答案

class Demo extends React.Component {
  constructor(props) {
	  super(props);
    this.textValues = { a: null, b: null };
  }

  handleChange = field => (event) => {
	  console.log(field)
    this.textValues[field] = event.nativeEvent.text
  }

  render() {
    return (
      <View>
        <TextInput onChange={this.handleChange('a')} />
        <TextInput onChange={this.handleChange('b')} />
      </View>
    )
  }
}

ReactDOM.render(
  <Demo />,
  document.getElementById('container')
);