代码之家 › 专栏 › 技术社区 › sosick

向表中添加和删除数据-React

forms reactjs javascript

sosick · 技术社区 · 6 年前

我正在做一个简单的名字和电子邮件列表-按表在反应。我想从服务器获取数据,然后next可以动态地添加或删除人员。这是我的第一步反应,所以我有一个问题。

import React, { Component } from 'react';
import Form from "./Form";

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            people: [],
        };

        this.addPerson = this.addPerson.bind(this);
    }

    addPerson(name, email) {
        this.state.people.push({name: name, email: email});
    }

    componentDidMount() {
        this.getPeople();
    }

    getPeople() {
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(response => response.json())
            .then(response => this.setState({people: response}))
            .catch(error => console.log(error));
    }


    render() {
        return (
            <div className='App'>
                <Form/>
                <table>
                    <thead>
                    <tr>
                        <th>LP</th>
                        <th>USER</th>
                        <th>EMAIL</th>
                    </tr>
                    </thead>
                    <tbody>
                    {this.state.people.map((person, index) => {
                        return (
                            <tr key={person.email}>
                                <th>{index + 1}</th>
                                <td>{person.name}</td>
                                <td>{person.email}</td>
                            </tr>
                        )

                    })}
                    </tbody>
                </table>
            </div>
        )
    }

}

export default App;

import React, { Component } from 'react';

class Form extends Component {
    constructor() {
        super();

        this.state = {
            name: this.props.name,
            email: this.props.email
        };

        this.handleChange = this.handleChange.bind(this);
        this.addPerson = this.addPerson.bind(this);

    /*    this.formSubmit = this.formSubmit.bind(this); */
    }

    handleChange(e) {
        this.setState({[e.target.id]: e.target.value})
    }

    addPerson(name, email) {
        this.props.addPerson(name, email);
        this.setState({name: '', email: ''});
    }

    render() {
        return (
            <form>
                <input id='name' type='text' name={this.state.name} placeholder='Name...'/>
                <input id='email' type='text' email={this.state.email} placeholder='Email...'/>
                <input onClick={() => this.addPerson(this.state.name, this.state.email)} type='submit' value='submit'/>
            </form>
        )
    }

}

export default Form;

现在我想为表单提交向表中添加数据,或者如果我想,为表删除数据。我被困在这一刻。。。

2 回复 | 直到 6 年前

Arup Rakshit 6 年前

我会重写你的代码如下。

我会做的 Form uncontrolled component . 这意味着,表单输入在您更改时将保持其自身的内部状态。不需要维护两个不同的数据源。所以我将依赖父组件 App 国家。我还添加了一个表单提交处理程序,它将在提交时获取输入值,然后调用 addPerson 方法来自 应用程序 people 由根组件维护的状态 .

deletePerson 方法从列表中删除人员。这是两个组件的外观。

这里的方法依赖于这样一个事实:people list将大学电子邮件。因为你也选择它作为 key 道具。但是,如果您理解当前的代码流,您可以随时更改此条件。

import React, { Component } from "react";
import Form from "./Form";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      people: []
    };

    this.addPerson = this.addPerson.bind(this);
    this.deletePerson = this.deletePerson.bind(this);
  }

  addPerson(name, email) {
    this.setState(prevState => ({
      people: [...prevState.people, { name, email }]
    }));
  }

  componentDidMount() {
    this.getPeople();
  }

  getPeople() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(response => this.setState({ people: response }))
      .catch(error => console.log(error));
  }

  deletePerson(email) {
    return () => {
      this.setState(prevState => ({
        people: prevState.people.filter(person => person.email !== email)
      }));
    };
  }

  render() {
    console.log(this.state);

    return (
      <div className="App">
        <Form addPerson={this.addPerson} />
        <table>
          <thead>
            <tr>
              <th>LP</th>
              <th>USER</th>
              <th>EMAIL</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {this.state.people.map((person, index) => {
              return (
                <tr key={person.email}>
                  <th>{index + 1}</th>
                  <td>{person.name}</td>
                  <td>{person.email}</td>
                  <td>
                    <button onClick={this.deletePerson(person.email)}>
                      Delete
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
}

表单js

import React, { Component } from "react";

class Form extends Component {
  constructor() {
    super();
    this.formSubmit = this.formSubmit.bind(this);
  }

  formSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const email = form.elements["email"].value;
    const name = form.elements["name"].value;
    this.props.addPerson(name, email);
    form.reset();
  }

  render() {
    return (
      <form onSubmit={this.formSubmit}>
        <input
          id="name"
          type="text"
          defaultValue=""
          placeholder="Name..."
        />
        <input
          id="email"
          type="text"
          defaultValue=""
          placeholder="Email..."
        />
        <input type="submit" value="submit" />
      </form>
    );
  }
}

export default Form;

请检查一下 Codesandbox 演示。

Vgoose 6 年前

您必须创建一个deletePerson函数到应用程序组件,然后将deletePerson和addPerson作为道具传递到表单组件,如下所示:

<Form addPerson={this.addPerson} deletePerson={this.deletePerson} />

然后在表单组件中使用它们。