App.js

Question

我正在按React中的表格制作一个简单的名称和电子邮件列表。我想从服务器获取数据，然后可以动态添加或删除人员。这是我使用React的第一步，所以我遇到了问题。

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;

现在我想可以向表中添加数据以进行表单提交，或者，如果需要，可以删除表中的数据。我被困在这一刻...

Answer 1

我将按照以下方式重写您的代码。

我将Form的组件设为uncontrolled component。这意味着，表单输入将在您更改时保持其内部状态。无需维护两个不同的数据源。因此，我将依靠父组件App的状态。我还添加了一个表单提交处理程序，该处理程序将获取提交时的输入值，然后从addPerson调用App方法，以将名称添加到由根组件{{ 1}}。

我添加了people方法以从列表中删除人员。这是两个组件的外观。

App方法在此依赖于以下事实：联系人列表中的人员将带有 uniq 电子邮件。正如您还选择它作为deletePerson道具一样。但是您始终可以更改此标准，如果您了解当前的代码流程，这将很容易。

App.js

deletePerson

Form.js

key

请查看Codesandbox演示。

Answer 2

您必须为App组件创建一个deletePerson函数，然后将deletePerson和addPerson作为prop传递给Form组件，如下所示：

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

然后在您的Form组件中使用它们。

向表添加和删除数据-React

2 个答案:

App.js

Form.js