Question

我正在尝试创建一个表单，将值提交给我使用此代码设置的api

export default class login extends Component {

  constructor(props) {
    super(props);
    this.state = { email: "test", password: "test" }
  }

  handleButtonPress() {
    console.log("pressed");
    params = {
      email: this.state.email,
      password: this.state.password
    }
    api.login(params)
  }

  render() {
    return (
      <View>
        <FormLabel>Email</FormLabel>
        <FormInput onChangeText={(email) => this.setState({email})}/>
        <FormLabel>Password</FormLabel>
        <FormInput secureTextEntry={true} onChangeText={(password) => this.setState({password})}/>
        <Button
          raised
          icon={{name: 'check'}}
          title='SUBMIT'
          onPress={this.handleButtonPress()} />
      </View>
    );
  }
}

api按预期工作但功能正常 handleButtonPress（）每次我在FormInput中更改文本时都会调用，当我单击按钮时出现错误请附上此组件的方法

任何帮助表示赞赏！

Answer 1

变化：

要：

<nav class="navbar navbar-default">
  <div class="navbar-header">
    <a href="#" class="navbar-brand">Brand</a>
  </div>
  <ul class="list-inline">
    <li class="list-inline-item"><a href="#">Home</a></li>
    <li class="list-inline-item"><a href="#">Menu 1</a></li>
    <li class="list-inline-item"><a href="#">Menu 2</a></li>
    <li class="list-inline-item"><a href="#">Menu 3</a></li>
  </ul>
</nav>

修改

将<Button raised icon={{name: 'check'}} title='SUBMIT' onPress={this.handleButtonPress()} />添加到<Button raised icon={{name: 'check'}} title='SUBMIT' onPress={() => this.handleButtonPress()} />道具时，您会立即调用它。如果你想调用那个函数，你必须用一个像this.handleButtonPress()这样的匿名箭头函数来包装它，或者你可以像onPress那样引用它。两者都有效。

以原生方式提交表单

1 个答案: