javascript - React Native add text to TextInput on button click - Stack Overflow

admin管理员组

文章数量:1320603

I would like to create a search field within React Native which works somehow similar to the searchfield on my webpage / .

What I did so far is the following:

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;

When I enter a search text to the TextInput it works fine and is shown in alert() on submit. What I want to achieve now is, when I click on the button "#U9", I want to append the string #U9 to the text input and display it. Right now if I enter the text "test", click the "#U9" button and submit, I get "test #U9" alerted as I expect. The problem is, that the #U9 is not displayed in the input field. How can I update the text input when I click the button?

For the finetuning I would like to add buttons and according values in a foreach to avoid repeating 10 times the same code. If any1 has a suggestion for that as well I would love to hear it!

For the very very finetuning I would like to do the following: On first button click: append #U9 to the text. On second button click: remove #U9 from the text.

Thanks a lot for some help!

Cheers, Oliver

I would like to create a search field within React Native which works somehow similar to the searchfield on my webpage https://todayin.de/ .

What I did so far is the following:

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;

When I enter a search text to the TextInput it works fine and is shown in alert() on submit. What I want to achieve now is, when I click on the button "#U9", I want to append the string #U9 to the text input and display it. Right now if I enter the text "test", click the "#U9" button and submit, I get "test #U9" alerted as I expect. The problem is, that the #U9 is not displayed in the input field. How can I update the text input when I click the button?

For the finetuning I would like to add buttons and according values in a foreach to avoid repeating 10 times the same code. If any1 has a suggestion for that as well I would love to hear it!

For the very very finetuning I would like to do the following: On first button click: append #U9 to the text. On second button click: remove #U9 from the text.

Thanks a lot for some help!

Cheers, Oliver

• javascript
• reactjs
• react-native

Share Improve this question Follow asked May 25, 2016 at 15:15 Oliver FrankeOliver Franke 3511 gold badge11 silver badge55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You're just re-assigning the state field, rather than calling setState. Try

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

React uses setState to reassign the state field and to notify the framework that this ponent needs to rerender

See setState documentation

edit: First thing to do is to move the button's render logic into it's onw function and to update the event handler to take the tag name as a param

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});
}

Then replace the U9 varialbe with a list of tags

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

And replace the normal button rendering code with a map over the tags

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>

        );
}

This will render all the tags as buttons and pass their value into the event handler

thanks a lot for you help @wegrata !

I got an "undefined is not an object" when calling the renderButton onPress function. That means that the function this.addTagToInput was not defined anymore in the renderButton().

So what I did was passing down this to the functions, here's the full code:

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;

You should call this.setState() method instead of assigning object directly to this.state.

this code should work

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

本文标签： javascriptReact Native add text to TextInput on button clickStack Overflow