React NativeボタンをクリックしてTextInputにテキストを追加

Question

私のウェブページhttps://todayin.de/のsearchfieldと何とか似ているReact Native内に検索フィールドを作成したいと思います。私がこれまでにやった

は以下の通りです：

class SearchField extends React.Component { 
constructor(props){ 
    super(props); 
    this.state = {text: ''}; 
    this.U9 = '#U9'; 
} 
render() { 
    return(
     <View> 
     <TextInput 
     autoCorrect={false} 
     autoFocus={false} 
     placeholder="#Kicker #Moabit" 
     onChangeText={(text) => this.setState({text})} 
     value={this.state.text} 
     onSubmitEditing={(event) => this.startSearch()} 
     /> 

     <Button 
     style={{fontSize: 20, color: 'green'}} 
     styleDisabled={{color: 'red'}} 
     onPress={this.addTagToInput.bind(this)} 
     > 
     {this.U9} 
     </Button> 

     </View> 

     ); 
} 
startSearch(){ 
    alert(this.state.text); 
} 
addTagToInput(event){ 
    this.state = {text: this.state.text + " " + this.U9}; 
} 

} 
module.exports = SearchField; 

私はそれが正常に動作し、提出に警告（）に示されているTextInputの検索テキストを入力します。ここで達成したいのは、ボタン "＃U9"をクリックすると、文字列＃U9をテキスト入力に追加して表示することです。今、 "test"というテキストを入力して "＃U9"ボタンをクリックして送信すると、私は期待通りに "test＃U9"という警告を受け取ります。 ＃U9が入力フィールドに表示されないという問題があります。ボタンをクリックすると、テキスト入力をどのように更新できますか？

finetuningのために、同じコードを10回繰り返さないように、foreach内のボタンと値に基づいて追加したいと思います。もしany1にもそれについての提案があれば、私はそれを聞いてみたい！

非常に細かいことに、私は次のことをしたいと思います： 最初のボタンをクリックすると、＃U9がテキストに追加されます。 2番目のボタンをクリックすると、テキストから＃U9を削除します。

ありがとうございました！むしろSETSTATEを呼び出すよりもあなただけの状態フィールドを再割り当てしている

乾杯、 オリバー

Answer 1

、。 setStateのドキュメントを参照してください。状態フィールドを再割り当てすると、このコンポーネントが

を再描画する必要があるフレームワークを通知する

addTagToInput(event){ 
    this.setState({text: this.state.text + " " + this.U9}); 
} 

が反応SETSTATEを使用して試してみてください編集

：行うには まず最初に移動することですボタンのロジックをonw関数にレンダリングし、イベントハンドラを更新してタグ名をパラメータとして取得するようにします。

renderButton(tag){ 
    return (<Button 
     style={{fontSize: 20, color: 'green'}} 
     styleDisabled={{color: 'red'}} 
     onPress={this.addTagToInput.bind(tag)}> 
     {tag} 
     </Button>); 
} 
addTagToInput(tag){ 
    this.setState({text: this.state.text + " " + tag}); 
} 

その後

をタグ

constructor(props){ 
    super(props); 
    this.state = {text: ''}; 
    this.tags = ['#U9']; 
} 

のリストとU9のvarialbeを交換し、タグの上にマップして、通常のボタンのレンダリングコードを置き換え

render() { 
    return(
     <View> 
     <TextInput 
     autoCorrect={false} 
     autoFocus={false} 
     placeholder="#Kicker #Moabit" 
     onChangeText={(text) => this.setState({text})} 
     value={this.state.text} 
     onSubmitEditing={(event) => this.startSearch()} 
     /> 
     {this.tags.map(this.renderButton)} 
     </View> 

     ); 
} 

これは、ボタンなどのすべてのタグをレンダリングし、その値を渡しますイベントハンドラへ

Answer 2

おかげさまで、@ wegrataを助けてくれてありがとう！

renderButton onPress関数を呼び出すときに、「未定義はオブジェクトではありません」というメッセージが表示されます。これは、this.addTagToInput関数がrenderButton（）でもう定義されていないことを意味します。

だから私は機能にこれを伝承してなかった何を、ここに完全なコードは次のとおりです。

class SearchField extends React.Component { 
constructor(props){ 
    super(props); 
    this.state = {text: ''}; 
    this.tags = ['#U9', '#Shisha','#Kicker']; 
} 
render() { 
    return(
     <View> 
     <TextInput 
     autoCorrect={false} 
     autoFocus={false} 
     placeholder="#Kicker #Moabit" 
     onChangeText={(text) => this.setState({text})} 
     value={this.state.text} 
     onSubmitEditing={(event) => this.startSearch()} 
     /> 
     {this.tags.map(this.renderButton.bind(this))} 
     </View> 

     ); 
} 

renderButton(tag){ 
    return (<Button 
     style={{fontSize: 20, color: 'green'}} 
     styleDisabled={{color: 'red'}} 
     onPress={this.addTagToInput.bind(this, tag)}> 
     {tag} 
     </Button>); 
} 

startSearch(){ 
    alert(this.state.text); 
} 
addTagToInput(tag){ 
    this.setState({text: this.state.text + " " + tag}); 
    } 

} 

module.exports = SearchField; 

Answer 3

あなたが代わりにthis.stateに直接オブジェクトを割り当てるthis.setState()メソッドを呼び出す必要があります。

このコードは

addTagToInput(event){ 
    this.setState({text: this.state.text + " " + this.U9}); 
}