Question

这是我尝试理解的示例代码。

class Form extends React.Component {

  constructor (props) {
     super(props)
     this.state = {
       input: ''
     }
  }

handleChangeInput = (text) => {
    this.setState({ input: text })
  }

  render () {
    const { input } = this.state

    return (
       <View>
          <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}
            onChangeText={this.handleChangeInput}
            value={input}
          />
        </View>
      )
    }
 }

在此困扰我的代码是

onChangeText = {this.handleChangeInput}

在这段代码中，没有参数传递给需要文本的方法（handleChangeInput）。

有人可以在这里开灯吗？

Answer 1

基本上，您正在传递对具有相同签名的函数的引用。

React function reference可能有助于阐明一些观点。

给予

callback = param => { /* do stuff */ };

然后

componentFn={callback};

等同于

componentFn = param => { /* do stuff */ };

但是

componentFn={param => callback(param)}

等同于

component = param => { callback(param) } // call function that does stuff

直接引用只会删除中间函数绑定。

Answer 2

需要将文本输入传递给handleChangeInput

<View>    
<TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) =>{this.handleChangeInput(text)}} value={input}/>   
</View>
or set directly the change text value
<TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({input:text})} value={input}/>

React Native方法中的参数

2 个答案: