1

如果我更新用户，我正在尝试更新子组件中表单中的值以发送到 api，但我无法更改表单中的任何值，并且如果我看到状态，它只会添加或删除一个字符。如何更新值？使用 defaultValue 解决了它，但它将输入更改为不受控制，这是我不想要的。

...
#Parent Class
                import React from "react";
                import "./styles.css";
                import Child from "./child";

                export default class Parent extends React.Component {
                  constructor() {
                    super();
                    this.state = {
                      user: {
                        id: [1, 2, 3, 4, 5],
                        name: ["john", "wick", "ellen", "fork", "gow"]
                      }
                    };
                  }

                  render() {
                    return <Child user={this.state.user}> </Child>;
                  }
                }
               #Child Class
                import React from "react";
                import "./styles.css";

                export default class Child extends React.Component {
                  constructor(props) {
                    super(props);
                    this.state = {
                      user: {
                        id: "",
                        name: ""
                      }
                    };
                  }

                  handleSubmit = e => {
                    e.preventDefault();
                  };

                  handleChange = e => {
                    const data = { ...this.state.user };
                    data[e.currentTarget.name] = e.currentTarget.value;
                    this.setState({ user: data });
                  };

                  render() {
                    console.log(this.state);
                    console.log(this.props);
                    return (
                      <>
                        {this.props.user.id.map((id, index) => {
                          return (
                            <form onSubmit={this.handleSubmit}>
                              <label> id </label>
                              <input
                                type="text"
                                value={
                                  this.props.user.id[index] !== "undefined"
                                    ? this.props.user.id[index]
                                    : this.state.user.id
                                }
                                onChange={this.handleChange}
                              />
                              <br />
                              <label> name </label>
                              <input
                                type="text"
                                value={
                                  this.props.user.name[index] !== "undefined"
                                    ? this.props.user.name[index]
                                    : this.state.user.name
                                }
                                onChange={this.handleChange}
                              />
                            </form>
                          );
                        })}
                        }
                      </>
                    );
                  }
                }
...

我的示例代码是

https://codesandbox.io/s/focused-shamir-y85v9?file=/src/parent.js:0

4

2 回答 2

1

编辑：这是您在代码沙箱上的代码的修订版本

https://codesandbox.io/s/quizzical-dew-jhx1b

原来的：

所以这里有几个问题。首先，我不会直接从 props 中显示用户值，而是将它们存储在构造函数中的状态中。

例如

class MyApp extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      users: props.users
    }
  }
  ...

然后你可以根据索引修改状态。但是，您的数据组织方式是基于数组索引，这不是最好的。相反，我会让每个用户成为一个对象

const myUser = {
  id: 1,
  name: 'John'
}

如果您收到的数据已经是该格式，那么您可以像这样解析它：

const ids = [1,2,3,4];
const names = ['John','Jenny','Jasper','Jaclyn'];

const users = ids.map((id, i) => ({ id, name: names[i] })); // uses arrow syntax

因此，您的项目设置方式，您正在修改状态，但是，您没有显示状态。（因为 props 中用户的 id 永远是未定义的，代码的第 37,48 行）

因此，尝试将它们解析为状态，然后根据数组中的对象索引对其进行编辑，这将有助于将关联的 id 和名称保持在一起，而不会混淆它们。

于 2020-06-07T23:30:16.203 回答
0

handleChange这是因为 ine.currentTarget.name始终为空。因此，您正在使用空值设置状态。不完全确定你想做什么，但如果你这样做，

  handleChange = e => {
    this.setState({ ...this.state, user: { id: e.target.value } });
  };

您将在输入框中看到您的 id 字段更新。

您可能会考虑的一件事是让您的状态处理程序从父级传递下来，因此每个 onChange 都会更新状态。然后让你的输入道具只是this.props.user.id[index].

如果您提供您正在尝试做的事情，也许我可以提供更多帮助。

于 2020-06-08T01:48:50.467 回答