Get TextInput value from different component

Question

I have 2 react native components in my app, one is a toolbar that has a "Done" button, pressed when a user is done filling a form.
The other is the form itself from where I need to get the data.
When the user clicks "Done" I send a post request with the parameters, but I can't find a neat way to get the data.
What is best practice for this?

My toolbar:

<TopToolbar text='Upload new item' 
  navigator={this.props.navigator} state={this.state} donePage={'true'}/>

In the toolbar component I have the done button:

        <TouchableHighlight style={styles.done} onPress={() =>{this.state.text=this.props.state.data.price}} underlayColor='#4b50f8'>
          <Image source={require('./Images/Path 264.png')}/>
        </TouchableHighlight>

and one of the text inputs is:

  <TextInput placeholder='Price*' style={styles.text} onChangeText={(text) => { this.state.data.price = text }}></TextInput>

jose920405 · Accepted Answer · 2017-02-17 19:41:03Z

3

Use state. You need to bind the view to the model => (state). Please add your code for a better guide.

Each time that you press and new character need be saved in your state using onChangeText

Example:

class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Useless Placeholder' };
  }

  render() {
    return (
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />
    );
  }
}

When you press in Done button. The TextInput value will be stored in this.state.text

For more info: https://facebook.github.io/react-native/docs/textinput.html

I think your main problem is that you need to read more about the states in the react documentation

https://facebook.github.io/react-native/docs/state.html

When you needs set the state. You should use setState not this.state.data.price = text. The state is a object with multiple keys y your needs modify one internal key inside data you need modify all data key and replace it.

Example:

In your constructor declare

this.state = { data: {price: 10, name: xxxx} };

if need modify data you should do something like.

var dataM = this.state.data;
dataM.price = 200

this.setState({ data: dataM});

edited Feb 17, 2017 at 19:41

answered Feb 17, 2017 at 19:04

jose920405

8,0656 gold badges48 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Yinon Eliraz Over a year ago

and how do I get the state from the other component? Do I need to pass it as a prop?

jose920405 Over a year ago

If you are using redux, just need save in the reducer and use the same reducer in your other scena. If only use react, just pass it as a prop. Just like you say

Yinon Eliraz Over a year ago

I tried that and the state seems to be static and does not change

jose920405 Over a year ago

Please add the code you are typing for this, to be able to give you a better guide

Yinon Eliraz Over a year ago

I have added the relevant code, If you want to see other stuff I can add.

Collectives™ on Stack Overflow

Get TextInput value from different component

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related