Question

我有以下TextInput组件来接受用户的用户名/电子邮件。它嵌套在一个登录表单组件中，该组件将回调传递给其子组件以更新其自己的状态。

export default class LoginForm extends Component {
  constructor(props){
      this.updateUser = this.updateUser.bind(this);
      this.state = {
        user: "",
      };
  }

  updateUser(newUser){
      this.setState( oldState =>{
        oldState.user = newUser;
        return oldState;
      });
  }

  <TextInput 
    placeholder="username or email"
    submitHandler={this.updateUser}
    onSubmitEditing={text => this.props.submitHandler(text);}
  />
}

但由于某些原因，提交登录文本会在调用this.props.submitHandler(text)时抛出异常。如果我将此行更改为this.submitHandler(text)，也会发生这种情况。这里有什么我想念的吗？ TextInput组件不允许我设置新道具吗？我是否在函数调用中使用了错误的上下文？

Answer 1

将以前的注释提取到答案中，onSubmitEditing为您提供了一个事件对象。（这里是可以向React Native项目添加更多文档的地方之一......）。

如果你这样做event => console.log(event)，你可以看到事件的所有属性，其中包括nativeEvent，包含你需要的文本值（你必须直接引用event.nativeEvent.text）但是要查看调试器中的值，否则由于事件池的存在，它将为null（参见here））。

正如Nicholas Tower所评论的那样，setState（）可以选择在操作完成时传入要使用的函数。更多详情here。

React Native throws＆＃34; undefined不是函数＆＃34;在props.function（）调用

1 个答案: