设置状态[react-native]后无法编辑inputText

Question

After sending a fetch request, and save in a state data, and display the value saved in the inputText I can't edit it anymore. Otherwise, it works when my input is clear.

Here is the code :

First step I fetch data needed after submiting textInput on input.js

<TextInput
    style={[ style.itemInfoMajor, global.alignRight ]}
    onFocus={ onFocus }
    onChangeText={ this._onChange }
    onSubmitEditing={ () => this._onSubmit(network) }
    value={ value }
    returnKeyType="done"
    enablesReturnKeyAutomatically={ true }
    clearButtonMode="always"
    placeholder={ network }
    placeholderTextColor="rgba(255, 255, 255, 0.25)"
    autoCorrect={ false }
    autoCapitalize="none"
    clearTextOnFocus={ true }
/>

On list.js I retrieve data after loading application.

It there where I set the state who get the value for the inputText

componentWillMount() {
  this._loadInitialState().done();
},


async _loadInitialState() {
  try {
    const value = await Storage.get('userData');

    if (value !== null) {
      this.setState({
        data: value,
      });
    }
  }
}

And it's the below where I passed the state to the input component

<Input
  onFocus={ this._handleFocus.bind(this, item) }
  value={ value }
  ref={ item }
  key={ i }
  network={ item }
/>

I join a little video to watch in live the problem : https://vid.me/8L9k The source code is here : https://github.com/statiks/statiks-react-native/blob/master/sources/input/index.js

How can I do to edit this value for this input ?

Answer 1

Try setting value in getInitialState:

getInitialState() {
  return {
    ...,
    value: this.props.value
  };
},  

Then, using this.state.value in the textInput:

<TextInput
  ...
  value={ this.state.value }
  ... />

Then, update the value state on change:

_onChange(username) {
  this.setState({ value: username });
 },

It also looks like you may be passing the incorrect value down as a prop. You need to pass this.state.data instead of value:

<Input
 value={ this.state.data }
 ref={ item }
 key={ i }
 network={ item }
/>

I don't have your complete code, but I tested it and it seems to be working for me this way. (you may need to set an initial state of data on the parent as an empty string or data structure)

Answer 2

I think there is a bug in _onChange. Shouldn't it be

_onChange(username) {
    this.setState({ username: username });
},