Question

我正在创建一个待办事项列表。对于TextInput，我不想使用按钮和“onPress :(）=＆gt;”处理程序用给定文本的用户调用我的函数。相反，我希望用户能够点击返回键来调用我的函数。似乎react-native没有“onReturnKey”处理程序。关于我应该怎么做的任何建议？

...

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { newTodo: '' };
  }

  AddNewTodo(text) {
    return console.log(text);
  }

  render() {
    return (
      <View>
        <Header headerText="VANO" />
        <Card>
          <CardSection style={{ backgroundColor: '#f7f7f7' }}>
            <Text style={styles.titleStyle}>
              Reminders
            </Text>
          </CardSection>

          <CardSection>
            <Input
              placeholder="Create Reminder"
              returnKeyType='done'
              onChangeText={(text) => this.setState(this.newTodo: text)}
              onSubmitEditing={() => this.AddNewTodo(this.state.newTodo)}
              value={this.state.newTodo}
            />
          </CardSection>

...

Answer 1

TextInput组件有returnKeyType的道具。您可以将其与onSubmitEditing结合使用，以便在按下返回键时运行函数。

示例：

constructor() {
    this.state = { new_todo: '' }
}
render() {
    return (
        ....
        <TextInput
            returnKeyType={"done"}
            onChangeText={(text) => { this.setState(new_todo: text) }}
            onSubmitEditing={() => { myFunctionToAddNewTodo(this.state.new_todo) }}
            value={this.state.new_todo}/>
        ...
    )
}

当用户点击返回键时要渲染的渲染处理程序

1 个答案: