时间戳

首页 > 解决方案 > 更新 react js 中的表单并不会跟踪所有道具的状态

javascript - 更新 react js 中的表单并不会跟踪所有道具的状态

问题描述

我在更新值时遇到问题。最初我将父类中的值放入文本框中，然后如果我想通过子组件将值更新到表单中，它基本上应该在子组件中设置状态并将更新后的值传递给 API . 但是现在当我尝试更改文本框中的值时，它只会更改一个字符，并且不会跟踪所有道具的状态。我该如何解决这个问题？我尝试使用 defaultValue 它确实更改了值，但它无法跟踪状态更改。

PS：updateToApi 只是一个示例函数，它使用 post 将值更新到 api 我的示例项目在这里 https://codesandbox.io/s/sad-perlman-ukb68?file=/src/parent.js

#class Parent#

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

    class Parent extends React.Component {
      constructor() {
        super();
        this.state = {
          data: {
            username: ["mar"],
            name: [null]
          }
        };
      }
      updateToApi(data) {
        var username: data.username;
        var name: data.name;
      }

      render() {
        return (
          <Child data={this.state.data} updateToApi={this.updateToApi.bind(this)} />
        );
      }
    }
    export default Parent;


##class Child##
    import React from "react";
    import "./styles.css";
    import { Button } from "react-bootstrap";

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

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

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

      render() {
        return (
          <>
            <form onSubmit={this.handleSubmit}>
              <label>
                Username:
                <input
                  type="text"
                  name="username"
                  value={
                    this.props.data.username !== "undefined"
                      ? this.props.data.username
                      : this.state.username
                  }
                  onChange={this.handleChange}
                />
              </label>
              <b />

              <label>
                Name:
                <input
                  type="text"
                  name="Name"
                  value={
                    this.props.data.name !== "undefined"
                      ? this.props.data.name
                      : this.state.name
                  }
                  onChange={this.handleChange}
                />
              </label>
              <br />
              <Button variant="primary" onClick={this.props.updateToApi} />
            </form>
          </>
        );
      }
    }
    export default Child;

标签： javascriptreactjsformsreact-forms

解决方案

为什么你有 2 个不同的状态？您应该完全摆脱 Child 组件中的状态，并且只使用 Parent 的状态。将 HandleChange 函数也放入您的 Parent 组件中，并通过 props 传递它。

UPD

好吧，如果您希望输入中的更改可见，您可以将 Child 组件中的 onchange 处理程序更改为

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

};

和输入值只是this.state.username

虽然我仍然很难掌握你在这里想要完成的事情。为输入字段设置 2 个单独的条件状态实在是太复杂了。想象一下，如果您的应用程序会更复杂一点？你迷失了调试这些东西：

value={ this.props.data.username !== "undefined"
              ? this.state.username
              : this.state.username
          }

因此，我强烈建议您重新评估应用程序中的所有数据结构和数据流。您应该在应用程序中拥有最少的事实来源。理想情况下是一个。因此，只需使用 Parent 组件中的主要状态并传递所需的道具。

推荐阅读