Реагировать на native получить значение TextInput

Ответ 1

Быстрый и менее оптимизированный способ сделать это - использовать функцию стрелки внутри обратного вызова onChangeText, передав username в качестве аргумента обратного вызова onChangeText.

<TextInput
    ref= {(el) => { this.username = el; }}
    onChangeText={(username) => this.setState({username})}
    value={this.state.username}
/>

тогда в вашем методе _handlePress

_handlePress(event) {
    let username=this.state.username;
}

Но это имеет несколько недостатков !!!

1. На каждом рендере этого компонента создается новая функция стрелки.
2. Если дочерний компонент представляет собой PureComponent, он будет без необходимости принудительно повторять визуализацию, это вызывает огромную проблему с производительностью, особенно при работе с большими списками, таблицами или компонентами, повторяющимися с большими числами. Подробнее об этом в React Docs

Рекомендуется использовать такой обработчик, как handleInputChange, и связать '' 'this' 'в конструкторе.

...
constructor(props) {
  super(props);
  this.handleChange= this.handleChange.bind(this);
}

...
handleChange(event = {}) {
  const name = event.target && event.target.name;
  const value = event.target && event.target.value;

  this.setState([name]: value);
}
...

render() {
  ...
  <TextInput
    name="username"
    onChangeText={this.handleChange}
    value={this.state.username}
  />
  ...
}

...

Или, если вы используете сокращение свойства класса es6, которое автоматически связывается this. Но это имеет недостатки, когда дело доходит до тестирования и производительности. Подробнее здесь

...
handleChange= (event = {}) => {
  const name = event.target && event.target.name;
  const value = event.target && event.target.value;

  this.setState([name]: value);
}
...

render() {
  ...
  <TextInput
    name="username"
    onChangeText={this.handleChange}
    value={this.state.username}
  />
  ...
}

...

Ответ 2

In React Native 0.43: (Возможно, позже 0,43 в порядке.)

_handlePress(event) {
    var username= this.refs.username._lastNativeText;

Ответ 3

Если вы похожи на меня и не хотите использовать или загрязнять состояние для одноразовых компонентов, вот что я сделал:

export default class Registartion extends Component {
  _register = () => {
    const payload = {
      firstName: this.firstName,
      /* other values */
    }

    console.log(payload)
  }

  render() {
    return (
      <RegisterLayout>
        <Text style={styles.welcome}>
          Register
        </Text>

        <InputText
          placeholder="First Name"
          onChangeText={(text) => this.firstName = text} />
        // More components...
        <CustomButton
          backgroundColor="steelblue"
          handlePress={this._register}>
          Submit
        </CustomButton>
     </RegisterLayout>
    )
  }
}

Ответ 4

Вы должны использовать States для хранения значений полей ввода. https://facebook.github.io/react-native/docs/state.html

• Для обновления значений состояния используйте setState

onChangeText = {(value) => this.setState({username: value})}

• и получить входное значение, как это

this.state.username

Образец кода

export default class Login extends Component {

    state = {
        username: 'demo',
        password: 'demo'
    };

    <Text style={Style.label}>User Name</Text>
    <TextInput
        style={Style.input}
        placeholder="UserName"
        onChangeText={(value) => this.setState({username: value})}
        value={this.state.username}
    />

    <Text style={Style.label}>Password</Text>
    <TextInput
        style={Style.input}
        placeholder="Password"
        onChangeText={(value) => this.setState({password: value})}
        value={this.state.password}
    />

    <Button
        title="LOGIN"
        onPress={() => 
            {
                if(this.state.username.localeCompare('demo')!=0){
                    ToastAndroid.show('Invalid UserName',ToastAndroid.SHORT);
                    return;
                }

                if(this.state.password.localeCompare('demo')!=0){
                    ToastAndroid.show('Invalid Password',ToastAndroid.SHORT);
                    return;
                }

                //Handle LOGIN

            }
        }
    />

Ответ 5

Пожалуйста, позаботьтесь о том, как использовать setState(). Правильная форма

this.setState({
      Key: Value,
    });

И поэтому я бы сделал это следующим образом:

onChangeText={(event) => this.setState({username:event.nativeEvent.text})}
...    
var username=this.state.username;

Ответ 6

Это работа для меня

    <Form>

    <TextInput
    style={{height: 40}}
    placeholder="userName"
    onChangeText={(text) => this.userName = text}
    />

    <TextInput
    style={{height: 40}}
    placeholder="Password"
    onChangeText={(text) => this.Password = text}
    />


    <Button 
    title="Sign in!" 
    onPress={this._signInAsync} 
    />

    </Form>

а также

  _signInAsync = async () => {
        console.log(this.userName)
        console.log(this.Password) 
  };

Ответ 7

export default class App extends Component {
  state = { username: '', password: '' }

  onChangeText = (key, val) => {
    this.setState({ [key]: val})
  }
  
  render() { 
    return (
      <View style={styles.container}>
          <Text>Login Form</Text>
          <TextInput
            placeholder='Username'
            onChangeText={val => this.onChangeText('username', val)}
            style={styles.input}
          />
          <TextInput
            placeholder='Password'
            onChangeText={val => this.onChangeText('password', val)}
            style={styles.input}
            secureTextEntry={true}
          />      
      </View>
    );
  }
}

Ответ 8

Пользователь в init класса:

constructor() {
    super()
    this.state = {
        email: ''
    }
}

Тогда в некоторой функции:

handleSome = () => { console.log(this.state.email) };

И на входе:

<TextInput onChangeText={(email) => this.setState({email})}/>

Ответ 9

Если вы задали текстовое состояние, почему бы не использовать его напрямую?

_handlePress(event) {
  var username=this.state.text;

Конечно, имя переменной может быть более наглядным, чем "текст", но ваш вызов.

Ответ 10

Для меня все в порядке с этой процедурой:

<Input onChangeText={this.inputOnChangeText} />

а также:

inputOnChangeText = (e) => {
  this.setState({
    username: e
  })
}

Ответ 11

Этот кусок кода работал у меня. То, что мне не хватало, заключалось в том, что я не пропускал 'this' в действие кнопки:

 onPress={this._handlePress.bind(this)}>
--------------

  _handlePress(event) {
console.log('Pressed!');

 var username = this.state.username;
 var password = this.state.password;

 console.log(username);
 console.log(password);
}

  render() {
    return (
      <View style={styles.container}>

      <TextInput
      ref="usr"
      style={{height: 40, borderColor: 'gray', borderWidth: 1 , marginTop: 10 , padding : 10 , marginLeft : 5 , marginRight : 5 }}
      placeHolder= "Enter username "
      placeholderTextColor = '#a52a2a'

      returnKeyType = {"next"}
      autoFocus = {true}
      autoCapitalize = "none"
      autoCorrect = {false}
      clearButtonMode = 'while-editing'
      onChangeText={(text) => {
          this.setState({username:text});
        }}
      onSubmitEditing={(event) => {
     this.refs.psw.focus();

      }}
      />

      <TextInput
      ref="psw"
      style={{height: 40, borderColor: 'gray', borderWidth: 1 , marginTop: 10,marginLeft : 5 , marginRight : 5}}
      placeholder= "Enter password"
      placeholderTextColor = '#a52a2a'
      autoCapitalize = "none"
      autoCorrect = {false}
      returnKeyType = {'done'}
      secureTextEntry = {true}
      clearButtonMode = 'while-editing'
      onChangeText={(text) => {
          this.setState({password:text});
        }}
      />

      <Button
        style={{borderWidth: 1, borderColor: 'blue'}}
        onPress={this._handlePress.bind(this)}>
        Login
      </Button>

      </View>
    );``
  }
}

Ответ 12

Вы пробовали

var username=this.state.username;