ユーザがリターンキーを押すと呼び出されるレンダリングハンドラ

Question

私はtodoリストを作成しています。 TextInputについては、ボタンを使いたくないし、 "onPress：（）=>"ハンドラを使ってテキストを与えられたユーザと関数を呼び出す必要があります。代わりに、私は関数を呼び出すためにリターンキーを押すことができるようにしたいと思います。 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}/> 
     ... 
    ) 
}