onChange文本未更新其状态

时间:2019-04-09 05:27:58

标签: react-native

import React, { Component } from 'react';
import { Text, View, TextInput, Button, Alert } from 'react-native';

import datum from './data';

export default class Signup extends React.Component {
  constructor(props) {
    super(props);

    this.state = { name: 'sff', number: '' };
  }

  signupPressed = () => {
    const { name } = this.state;

    console.log('checkss', name);
  };
  render() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'column',
          justifyContent: 'space-evenly',
          alignItems: 'center',
        }}>
        <TextInput
          style={{
            height: 40,
            borderColor: 'gray',
            borderWidth: 1,
            width: '50%',
          }}
          onChangeText={TextInputValue => this.setState({ name })}
          placeholder="Name"
        />
        <TextInput
          style={{
            height: 40,
            borderColor: 'gray',
            borderWidth: 1,
            width: '50%',
          }}
          onChangeText={text => this.setState({ name })}
          placeholder="Mobile no"
        />
        <Button
          onPress={this.signupPressed}
          title="Signup"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
      </View>
    );
  }
}

我有文本输入,但是onChangeText道具无法正常工作

预期的行为 必须从单击按钮时的状态开始记录更新后的名称值

现实

当我单击按钮时,它只会记录我“检查”,而不是名称值

这里有什么奇怪的地方!

当我第一次单击该按钮时,它将记录我“ checkss,sff”,但是,当我第二次单击该按钮时,它仅显示支票

4 个答案:

答案 0 :(得分:2)

这是因为在onChangeText中,您需要这样做,

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

答案 1 :(得分:0)

    import React, {Component} from 'react';
     import {Text, View,TextInput,Button,Alert} from 'react-native';

    import datum from './data';

     export default class Signup extends React.Component {
     constructor(props) {
     super(props)

     this.state = {name:"sff",number:""};



      }


     signupPressed=()=>{
       const { name }  = this.state ;

     console.log('checkss',name);


      }
     render() {
    return (
      <View style={{flex:1,flexDirection:'column',justifyContent:'space-evenly',alignItems:'center'}}>
      <TextInput
value={this.state.name}
        style={{height: 40, borderColor: 'gray', borderWidth: 1,width:'50%'}}

         onChangeText={(name) => this.setState({name})}
        placeholder="Name"

      />
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1,width:'50%'}}
value={this.state.number}
        onChangeText={(number) => this.setState({number})}
          placeholder="Mobile no"

      />
      <Button



        onPress={this.signupPressed
        }





       title="Signup"
        color="#841584"
       accessibilityLabel="Learn more about this purple button"
    />
      </View>
    );
      }



         }




Try above code it will work for you

答案 2 :(得分:0)

df = pd.DataFrame({'col':['45+2','98+3','90+5']})

df['new'] = df['col'].str.split('+').str[0]
print (df)
    col new
0  45+2  45
1  98+3  98
2  90+5  90

答案 3 :(得分:0)

您的代码失败,因为您在声明de arrow函数时犯了一个错误

onChangeText={TextInputValue => this.setState({name})}

必须是

onChangeText={TextInputValue => this.setState({ name: TextInputValue })}

使用Ecma6可以简化为

onChangeText={name => this.setState({ name })}

为避免性能问题,建议不要使用内联函数,因为它在所有渲染周期中都已实例化。如果创建一个类方法并通过引用使用它,则更好。

export default class Signup extends React.Component {
  constructor(props) {
    super(props)
    this.state = {name:"sff",number:""};
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(name) {
    this.setState({ name });
  }
  render() {
    /* rest of code ommited */
    <TextInput
      style={
        { height: 40, borderColor: 'gray', borderWidth: 1,width:'50%' }
      }
      onChangeText={this.handleChange}
      placeholder="Mobile no"
    />
    /* rest of the code ommited */
  }
}