Question

我是新来的反应者，我可以从表单输入字段中获取结果。现在，我需要更新这些值并提交到后端。我正在努力寻找一种可以一次传递所有输入字段值的方法。

constructor(props) {
    super(props);
    this.state = {
        items: [],
        isLoaded: false,
        data: this.props.location.data
    };
}

render() {
    return (
        <div>
            <h2>Update Your Profile</h2>
            {items.map(item => (
                <Form key={item.uId} onSubmit={this.handleSubmit}>
                        <label>User Name</label>
                        <input type="text" defaultValue={item.userName}></input>
                        <label>Email address</label>
                        <input type="email" defaultValue={item.email}></input>
                    </div>
                    <button type="submit" >Update</button>
                </Form>
            ))}
        </div>
    );
}

handleSubmit = (e) => {
    e.preventDefault();
    axios.put('http://localhost:3000/api/user/' + this.state.data, this.state.items).then(response => {
        //
    });
};

我的API调用如下：

app.put('/api/user/:userId', (req, res, err) => {
    User.update(
        { userName: req.body.userName, email: req.body.email },
        {
            where: {
                userId: req.params.userId
            }
        }
    ).then(function (rowsUpdated) {
        res.json(rowsUpdated)
    }).catch(err);
});

如何修改此代码以为this.state.items设置一个具有所有已更新字段值的值并提交？

Answer 1

我建议创建一个新的组件来包装<Form />，并将每个item的提交/更改事件处理移至该组件。这样一来，您就可以为任何给定的email提取单独的userName / <Form />作为PUT发送到您的API端点，并处理相应的输入值更改。

父项：

class Parent extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      items: [
        { uId: 1, email: 'foo@test.com', userName: 'bar' },
        { uId: 2, email: 'baz@test.com', userName: 'foobar' }
      ]
    };
  }

  render() {
    return (
      <div>
        {this.state.items.map(item => 
          <MyForm key={item.uId} item={item} data={this.props.location.data} />)}
      </div>
    );
  }
}

子级/表单组件：

import React, { Component } from 'react';

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

    this.state = {
      email: this.props.item.email,
      userName: this.props.item.userName
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  // https://reactjs.org/docs/forms.html#handling-multiple-inputs
  handleChange(e) {
    const { target}  = event;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const { name }  = target;

    this.setState({ [name]: value });
  }

  handleSubmit(e) {
    e.preventDefault();

    const { email, userName } = this.state;
    const body = { email, userName };
    const json = JSON.stringify(body);
    console.log(json);

    // axios.put('http://localhost:3000/api/user/' + this.props.data, json).then(response => {});
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>User Name</label>
        <input type="text" defaultValue={this.state.userName}></input>
        <label>Email address</label>
        <input type="email" defaultValue={this.state.email}></input>

        <button type="submit" >Update</button>
      </form>
    );
  }
}

export default MyForm;

这里是https://myhost.pythonanywhere.com/ff的动作。

希望有帮助！

更新反应形式输入字段中的值

1 个答案: