Axios Post 与 React-native答案

【问题标题】：Axios Post with React-nativeAxios Post 与 React-native
【发布时间】：2019-05-18 14:30:55
【问题描述】：

我一直在寻找答案，但我没有。我有一个使用 Axios 的 post 方法。来自输入的值不会传递给状态。

class LoginForm extends Component {
  constructor(props){
    super(props);
    this.state = {firstName:'', lastName: '', number: ''};
  }
  render(){
    return (
        <View>
        <Item floatingLabel>
        <Label>Ваше имя</Label>
        <TextInput Value={this.state.firstName} onChangeText={(firstName) => this.setState({firstName})}/>
        </Item>
        <Item floatingLabel>
        <Label>Ваша фамилия</Label>
        <TextInput value={this.state.lastName} onChangeText={(lastName) => this.setState({lastName})}/>
        <Text>{this.state.firstName}</Text>
        </Item>
        <Item floatingLabel>
        <Label>Номер телефона</Label>
        <TextInput value={this.props.number} onChange={(number) => this.setState({number})}/>
        </Item>
        <Button block style={{marginTop:50}} 
        onPress={() => {
          let data ={
            firstname: this.state.firstName,
            lastname: this.state.lastName,
            number: this.state.number
          }
          axios.post('http://10.0.2.2:3000/user_add',data)
                  }}>
        <Text>Отправить</Text>
      </Button>
      </View>
    );
  }

    }

export default LoginForm;

和

app.post('/user_add',function(req,res){
var firstname = req.body.firstname;
var lastname = req.body.lastname;
var number = req.body.number;
var values = [firstname,lastname,number];
console.log(values);
  
 connection.query('INSERT INTO users (firstname, lastname, number) VALUES (?)',[values],function(err){
     if(!err) {
         console.log("User added!")
         res.send(firstname,lastname,number);
     } else {
         console.log(err);
     }
 })
});

它有效，但不正确。用户添加，但没有我的值，它只添加''，''，'' 我尝试了一些建议：添加事件，尝试将值放入大量中，但它不起作用。结果： add values to DataBase

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

你应该像这样使用 TextInput： onChangeText={(firstName)=>this.setState({firstName})} 并对 lastName 和 number 重复相同的操作

文本输入的文本更改时调用的回调。更改的文本作为参数传递给回调处理程序。

https://facebook.github.io/react-native/docs/textinput#onchangetext

【讨论】：

你能不能在console.log(this.state)里面submitForm或者在点击提交按钮之前使用react-dev-tools检查组件的状态？
它是 android 上的应用程序，它让这件事变得更难
它仍然引用了不应存在的 e.target.value
我更改了 e.target
我注意到两个错别字：1-第一个 TextInput 道具：道具不是值 2-最后一个 TexInput 道具：onChange 应该是 onChangeText。仍然不确定它会解决问题

【解决方案2】：

我用：

import {TextInput} from 'react-native';

<TextInput
   editable={true}
   placeholder="Write here"
   onChangeText={text => this.setState({ inputText: text })}
   value={this.state.inputText}
/>

这对我很有用。请注意，您在第一个带有 firstName 的 TextInput 中使用大 V 编写了“Value”。把它改成小写字母，也许会有帮助。

【讨论】：

input 与 DOM 相关，而这个问题与 react-native 相关
抱歉没有注意到。修好了。