Question

我这里有一个带有子组件的应用程序，我试图将状态设置为用户输入的内容。我还想跟踪用户输入的更改。

到目前为止，这是我得到的：

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

    this.state = {
      firstName: "",
      lastName: "",
      userName: "",
      email: "",
      password: ""
    };

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

  componentDidMount() {}

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

    console.log("console log firstName >>>>>>", this.state.firstName);
  }

  render() {
    return (
      <div className="content">
        <SignUp
          formState={this.state}
          _handleChangeInput={this._handleChangeInput}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

这是孩子：

import React from "react";

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

  render() {
    return (
      <div>
        <form>
          <input
            name="firstName"
            id="firstName"
            placeholder="First Name"
            value={this.props.formState.firstName}
            onChange={e => this.props._handleChangeInput}
          />
        </form>
      </div>
    );
  }
}

export default Form;

每当我尝试在文本框中输入内容时，它都不允许我这样做，我什么都看不到。我在这做错了什么？还有如何通过console.log跟踪用户在文本框中输入的内容？我试图在componentDidMount中放入一些console.log，但它没有用。

Answer 1

您没有在SignUp类上传递事件e =＆gt; this.props._handleChangeInput（e）中

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: "",
      lastName: "",
      userName: "",
      email: "",
      password: ""
    };

    this._handleChangeInput = this._handleChangeInput.bind(this);
  }

  componentDidMount() {}

  _handleChangeInput(e) {
    this.setState({
      [e.target.name]: e.target.value
    }, () => {
      console.log("console log firstName >>>>>>", this.state.firstName);
    });
  }

  render() {
    return (
      <div className="content">
        <SignUp
          formState={this.state}
          _handleChangeInput={this._handleChangeInput}
        />
      </div>
    );
  }
}

class SignUp extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <form>
          <input
            name="firstName"
            id="firstName"
            placeholder="First Name"
            value={this.props.formState.firstName}
            onChange={e => this.props._handleChangeInput(e)}
          />
        </form>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

这里的问题是你没有控制SignUp组件的输入值变化。看看这个样本：

<input type="textarea" value={this.state.relevantInfo} onChange={this.onRelevantInfo_Change}/>

onRelevantInfo_Change = (event) => {
      this.setState({
        relevantInfo: event.target.value
      });
    }

当您在州上设置更新值时，您还必须绑定州对象的值而不是“道具”中的值

此外，您通过以下方式将完整状态从父组件传递到子组件：

formState={this.state}

你应该这样做，传播属性：

<SignUp {...props} />

这样做，它强制将SignUp与其父组件分离（无论如何必须做），使其可重用。

总结，将其重构为独立的，向父组件提供事件，getter / setter ...以获取在注册表单中输入的凭据。

希望它有所帮助。

Answer 3

您可以在此使用componentWillReceiveProps()

通过你的整个州

 <div className="content">
    <SignUp formState={this.state} _handleChangeInput={this._handleChangeInput} />
 </div>

现在，只要ParentComponent中的状态得到更新，它就会进入子组件中的componentWillReceiveProps()。

子组件

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

  componentWillReceiveProps(props){ // you will receive props here
    this.setState(props.formState);
  }

  render() {
    return (
      <div>
        <form>
          <input
            name="firstName"
            id="firstName"
            placeholder="First Name"
            value={this.state.firstName}
            onChange={e => this.props._handleChangeInput}
          />
        </form>
      </div>
    );
  }
}

Answer 4

您可以在没有e =＆gt;的情况下使用this.props._handleChangeInput（e）也是。您可以执行以下功能。通过解构获取输入的名称和价值，如下所示。

＆＃13;

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: "",
      lastName: "",
      userName: "",
      email: "",
      password: ""
    };

    this._handleChangeInput = this._handleChangeInput.bind(this);
  }

  _handleChangeInput(e) {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    }, () => {
      console.log("console log firstName >>>>>>", this.state.firstName);
    });
  }

  render() {
    return (
      <div className="content">
        <SignUp
          formState={this.state}
          _handleChangeInput={this._handleChangeInput}
        />
      </div>
    );
  }
}

class SignUp extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <form>
          <input
            name="firstName"
            id="firstName"
            placeholder="First Name"
            value={this.props.formState.firstName}
            onChange={this.props._handleChangeInput}
          />
        </form>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

国家不会改变反应

4 个答案: