无法在回应中发出回复

Question

我正在学习反应，并且我已经开始在反应中创建一个CRUD应用程序。我可以拨打获取电话，但由于某些原因邮政电话不通过。我App.js文件是：

import React, { Component } from 'react'; 
 
import logo from './logo.svg'; 
 
import './App.css'; 
 
import $ from 'jquery' 
 
import request from "../node_modules/superagent/superagent"; 
 
import axios from 'axios' 
 

 
import {UserForm} from './components/userForm' 
 

 
class App extends Component { 
 

 
    constructor(props){ 
 
    super(props) 
 
    this.state = { 
 
     users: [], 
 
     name: '', 
 
     email: '', 
 
     password: '' 
 
    } 
 
    this.handleInputChange = this.handleInputChange.bind(this) 
 
    this.handlePostRequest = this.handlePostRequest.bind(this); 
 
    } 
 

 
    handleInputChange(state, event) { 
 
    this.setState({[state]: event.target.value}); 
 
    } 
 

 
    handlePostRequest(event) { 
 
    var data = { 
 
     name: this.state.name, 
 
     email: this.state.email, 
 
     password: this.state.password 
 
    } 
 

 
    axios.post('http://localhost:8080/api/users', { 
 
     data: data 
 
    }) 
 
    .then(function (response) { 
 
     console.log(response); 
 
    }) 
 
    .catch(function (error) { 
 
     console.log(error); 
 
    }); 
 

 
    /*request 
 
    .post('http://localhost:8080/api/users') 
 
    .set('Content-Type', 'application/x-www-form-urlencoded') 
 
    .send({ name: this.state.name, email: this.state.email, password: this.state.password }) 
 
    .end(function(err, res){ 
 
    console.log(res.text); 
 
    }); 
 
    var self 
 

 
    event.preventDefault() 
 
    self = this 
 

 
    console.log(this.state); 
 

 
    var data = { 
 
     name: this.state.name, 
 
     email: this.state.email, 
 
     password: this.state.password 
 
    } 
 

 
    // Submit form via jQuery/AJAX 
 
    $.ajax({ 
 
     type: 'POST', 
 
     url: 'http://localhost:8080/api/users', 
 
     data: data 
 
    }) 
 
    .done(function(result) { 
 
     self.clearForm() 
 
     this.setState({result:result}) 
 
    }).bind(this) 
 
    .fail(function(jqXhr) { 
 
     console.log('failed to add the user'); 
 
    }).bind(this)*/ 
 
    } 
 

 
    componentDidMount() { 
 
    this.App(); 
 
    } 
 

 
    //making a get call 
 
    App() { 
 
    return $.getJSON('http://localhost:8080/api/users') 
 
     .then((data) => { 
 
      console.log(data); 
 
     this.setState({users:data}); 
 
     }) 
 
    } 
 

 
    render() { 
 
    return (
 
     <div className="App"> 
 
     <div className="App-header"> 
 
      <img src={logo} className="App-logo" alt="logo" /> 
 
      <h2>Welcome to React CRUD App</h2> 
 
     </div> 
 
     <div className = "Crud-App" > 
 

 
      <div className = "users-list" > 
 
      <ul> 
 
       {this.state.users.map(user => 
 
       <li key = {user._id} > 
 
        {user.name} 
 
       </li> 
 
      )} 
 
      </ul> 
 
      </div> 
 

 
      <UserForm handleInputChange = {this.handleInputChange} name = {this.state.name} 
 
      email = {this.state.email} password = {this.state.password} /> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default App;

我的用户窗体组件文件是：

import React from 'react' 
 

 
export const UserForm = (props) => (
 
    <form> 
 
     <label> Name: </label> <input onChange={props.handleInputChange.bind(this, 'name')} 
 
      value={props.name} /> 
 
     <label> Email: </label> <input type="text" onChange={props.handleInputChange.bind(this, 'email')} 
 
      value={props.email} /> 
 
     <label> Password: </label> <input type="text" onChange={props.handleInputChange.bind(this, 'password')} 
 
      value={props.password} /> 
 
     <button type="button" className = "pure-button pure-button-primary" onClick={props.handlePostRequest}>Add User</button> 
 
    </form> 
 
)

我已经试过阿贾克斯，爱可信，SuperAgent的和取只要您可以在App.js文件中看到注释的代码。但按提交按钮什么都不做。任何帮助，将不胜感激。谢谢

Answer 1

无状态功能组件没有this。您不应该重新绑定您的UserForm组件中的onChange处理程序。

此外，重写您的处理程序的签名，这样只需要在event参数：

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

    makeHandleInputChange(state) { 
    return e => { 
     this.setState({[state]: event.target.value}); 
    }; 
    } 

最后，更新您的UserForm用法：

<UserForm 
    makeHandleInputChange={this.makeHandleInputChange} 
    name={this.state.name} 
    email={this.state.email} 
    password={this.state.password} /> 

和UserForm本身的定义：

export const UserForm = (props) => (
    <form> 
    <label> Name: </label> 
    <input 
     onChange={props.makeHandleInputChange('name')} 
     value={props.name} /> 
    { /* ...the rest of the components here... */ } 
    </form> 
) 

编辑：你没有通过handlePostRequest作为道具UserForm。

<UserForm 
    makeHandleInputChange={this.makeHandleInputChange} 
    handlePostRequest={this.handlePostRequest} 
    name={this.state.name} 
    email={this.state.email} 
    password={this.state.password} />