Реактивный объект TextInput, получающий значение, но я явно передаю ему строку?

Question

state={username:"",password:""}

...

<TextInput style={styles.inputStyle}
    placeholder='email123@mail.com' 
    autoCorrect={false}
    value={this.state.username}
    onChange={text =>{ 
        this.setState({username:text});
        console.log(this.state.username);
    }}
/>

Ошибка, которую я получаю, заключается в том, что значение передается объекту, и он ссылается на строку, с которой начинается этот textInput, но я не вижу, как этовозможно

Стили просто:

let styles ={
    titleStyle:{
      fontWeight:'bold',
      fontSize: 20,
      textAlign:'center'
    },
    inputStyle:{
      backgroundColor:'#d4d4d4'
    }
}

Внутри рендера.

Answer 1

onChange вернет вам объект, если вы используете onChangeText, он вернет значение напрямую.

<TextInput 
    style={styles.inputStyle}
    placeholder='email123@mail.com' 
    autoCorrect={false}
    value={this.state.username}
    onChangeText={text => this.setState({ username: text })}
/>

Или, если вы хотите использовать onChange, вы можете сделатьэто таким образом:

<TextInput 
    style={styles.inputStyle}
    placeholder='email123@mail.com' 
    autoCorrect={false}
    value={this.state.username}
    onChange={event => this.setState({ username: event.target.value })}
/>

Чтение Реагирует на собственный - Разница между onChange и onChangeText TextInput

Answer 2

Попробуйте этот код: onChange={this.onUserChange}

onUserChange = (e, {value}) => { if (value) this.setState({username:value}) }

Answer 3

Используйте onChangeText вместо onChange.