React native 反应本机获取文本输入值_React Native

React native 反应本机获取文本输入值

react-native

React native 反应本机获取文本输入值,react-native,React Native,我遇到了一个非常简单的问题。我有用户名、密码和按钮的登录表单。在我的按钮处理程序中，我尝试获取textinput值。但总是得到未定义的值。我错过什么了吗 render() { <ExScreen headerColor={this.state.headerColor} scrollEnabled={this.state.enableScroll} style={styles.container} >

我遇到了一个非常简单的问题。我有用户名、密码和按钮的登录表单。在我的按钮处理程序中，我尝试获取textinput值。但总是得到未定义的值。我错过什么了吗

render() {
        <ExScreen
          headerColor={this.state.headerColor}
          scrollEnabled={this.state.enableScroll}
          style={styles.container} >
          <View >
            <View  >
              <View style={[styles.inputContainer]} >
                <TextInput
                  ref= "username"
                  onChangeText={(text) => this.setState({text})}
                  value={this.state.username}
                />
              </View>
 <Button style={{color: 'white', marginTop: 30, borderWidth: 1, borderColor: 'white', marginLeft: 20*vw, marginRight: 20*vw, height: 40, padding: 10}} 
             onPress={this._handlePress.bind(this)}>
              Sign In
            </Button>   
...
 _handlePress(event) {
    var username=this.refs.username.value;

render（）{
this.setState（{text}）}
值={this.state.username}
/>
登录
...
_扶手（活动）{
var username=this.refs.username.value；

你试过了吗

var username=this.state.username;

请注意如何使用setState（）。正确的形式是

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

所以我会这样做：

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

实现这一点的快速且不太优化的方法是在onChangeText回调中使用arrow函数，在onChangeText回调中传递

用户名

作为参数

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

但这有几个缺点

在该组件的每个渲染上，都会创建一个新的箭头函数

如果子组件是PureComponent，它将强制不必要地重新呈现，这将导致巨大的性能问题，特别是在处理大型列表、表或迭代大量数据的组件时

最佳实践是使用类似于

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}
  />
  ...
}

...

这段代码对我很有用。我缺少的是我没有在按钮操作中传递“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>
    );``
  }
}

onPress={this.\u handlePress.bind（this）}>
--------------
_扶手（活动）{
console.log（'Pressed！'）；
var username=this.state.username；
var password=this.state.password；
console.log（用户名）；
console.log（密码）；
}
render（）{
返回(
{
this.setState（{username:text}）；
}}
onSubmitEditing={（事件）=>{
this.refs.psw.focus（）；
}}
/>
{
this.setState（{password:text}）；
}}
/>
登录
);``
}
}

如果您和我一样，不想使用或污染一次性组件的状态，我会这样做：

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

导出默认类注册表扩展组件{
_寄存器=（）=>{
常数有效载荷={
名字：这个，名字，
/*其他价值观*/
}
控制台日志（有效负载）
}
render（）{
返回(
登记
this.firstName=text}/>
//更多组件。。。
提交
)
}
}

类的初始用户：

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

然后在某些函数中：

handleSome=（）=>{
console.log（this.state.email）
};
在输入中：
this.setState（{email}}/>
在React Native 0.43中：（可能高于0.43就可以了。）
您应该使用状态来存储输入字段的值。


要更新状态值，请使用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

            }
        }
    />

导出默认类登录扩展组件{
状态={
用户名：“演示”，
密码：“演示”
};
用户名
this.setState（{username:value}）}
值={this.state.username}
/>
密码
this.setState（{password:value}）}
值={this.state.password}
/>
{
if（this.state.username.localeCompare（'demo'）！=0）{
ToastAndroid.show（'Invalid UserName'，ToastAndroid.SHORT'）；
返回；
}
if（this.state.password.localeCompare（'demo'）！=0）{
ToastAndroid.show（'Invalid Password'，ToastAndroid.SHORT'）；
返回；
}
//处理登录
}
}
/>
如果您设置了文本状态，为什么不直接使用它呢
_handlePress(event) {
  var username=this.state.text;

当然，变量命名可能比“文本”更具描述性，但您的调用除外。
导出默认类应用程序扩展组件{
状态={用户名：''，密码：'}
onChangeText=（键，val）=>{
this.setState（{[key]：val}）
}
render（）{
返回(
登录表单
this.onChangeText（'username'，val）}
style={style.input}
/>
this.onChangeText（'password'，val）}
style={style.input}
secureTextEntry={true}
/>      
);
}
}
这是我的工作
    <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>

通过以下步骤，我的一切都正常：
<Input onChangeText={this.inputOnChangeText} />

构造函数（道具）{
超级（道具）；
这个州={
commentMsg:'
}
}
onPress=（）=>{
警报（“Hi”+this.state.commentMsg）
}
this.setState（{commentMsg:text}）
占位符='Comment'/>
只要做就行了
this.state={f_name:""};

textChangeHandler = async (key, val) => {
    await this.setState({ [key]: val });
}

<Textfield onChangeText={val => this.textChangeHandler('f_name', val)}>

this.state={f_name:”“}；
textChangeHandler=async（key，val）=>{
等待这个.setState（{[key]：val}）；
}
this.textChangeHandler（'f_name'，val）}>
尝试控制台记录对象，您将在nativeEvent.text中找到输入的文本
例如：
handelOnChange=（输入文本）=>{
console.log（enteredText.nativeEvent.text）
}
render（）
返回(
)
在
的onChange
和onTextChange
道具之间存在巨大差异。不要像我一样使用返回字符串的onTextChange
，不要使用返回完整对象的onChange

花了1个小时弄清楚我的价值在哪里，我觉得很傻。
如果上述方法不起作用，请尝试以下方法：onChangeText={（event）=>this.setState（{username:event.nativeEvent.text}）我得到的“undefined”不是对象（evaluation event.nativeEvent.text）“…但是，如果我使用onChange
事件而不是onChangeText
事件，那么它确实可以工作。如果使用ES6，您可以编写this.setState（{foo}）
    <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) 
  };

<Input onChangeText={this.inputOnChangeText} />

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

constructor(props) {
        super(props);

        this.state ={
            commentMsg: ''         
        }
    }

 onPress = () => {
          alert("Hi " +this.state.commentMsg)
      }

 <View style={styles.sendCommentContainer}>

     <TextInput
        style={styles.textInput}
        multiline={true}
        onChangeText={(text) => this.setState({commentMsg: text})}
        placeholder ='Comment'/>

       <Button onPress={this.onPress} 
           title="OK!"
           color="#841584"
        />

  </TouchableOpacity>

</View>

this.state={f_name:""};

textChangeHandler = async (key, val) => {
    await this.setState({ [key]: val });
}

<Textfield onChangeText={val => this.textChangeHandler('f_name', val)}>