Question

我是新的做出反应原生和尝试事件处理并想出了一个问题。

假设我有这样的代码

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的引用给出了undefined
如果我没有用handleChange绑定它，那么this.textValues没有定义，this.props.customProps给出了完美的值

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

Answer 1

＆＃13;

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')
);

＆＃13;

Answer 2

你想让handleChange函数知道从哪个TextInput调用？

试试这些代码

<TextInput
    customProps = 'T1'
    onChange = {(input)=>{
         this.handleChange("T1", input)
      }}
 />
 <TextInput
      customProps = 'T2'
      onChange = = {(input)=>{
         this.handleChange("T2", input)
      }}
 />

和hanleChange函数是

 handleChange(inputTag, inputText) {...}

将Custom props提供给TextInput并在事件处理程序上使用它

2 个答案: