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;

我的userForm组件文件是：

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

我已经尝试过ajax，axios，superagent和fetch，只要你能看到App.js文件中的注释代码。但是按下提交按钮什么都不做。任何帮助，将不胜感激。感谢

Answer 1

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

此外，重写您的处理程序签名，以便它只接受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} />

无法做出反应后的电话

1 个答案: