Question

我正在尝试做类似Hello World的操作，但是我希望用户能够输入他们的名字和姓氏，然后在父项上输入Hello，[FirstName] [LastName]！

不用说我是React的新手，但我想有一个专门用于输入名称的单独组件。

App.js（父级）

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import InsertName from "./insertName";

class App extends Component {
  state = {
    name: ""
  };
  handleClick = props=> {
    console.log("heyy", props.fname);
  };
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
      <h1 className="App-title">Welcome to React {this.state.name}</h1>
    </header>
    <p className="App-intro">
      To get started, editLdOL <code>src/App.js</code> and save to reload.
    </p>
    <InsertName onClick={this.handleClick} />
  </div>
);
  }
}

export default App;

孩子，InsertName

import React, { Component } from "react";
class InsertName extends Component {
 render() {
return (
  <div>
    First name: <input type="text" name="fname" value={this.props.fName} />
    <br />
    Last name: <input type="text" name="lname" value={this.props.lName} />
    <br />
    <button onClick={this.props.onClick}>Click here!!</button>
  </div>
);
  }
}

export default InsertName;

Answer 1

在App.js中（父级）

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import InsertName from "./insertName";

    class App extends Component {
      state = {
        lName: '',
        fName: ''
      };
      handleClick = props=> {
        const {lName, fName} = this.state
        //Handle fName and lName here
      };
      onLNameChange = (e) => {
        this.setState({lName: e.target.value})
      }
      onFNameChange = (e) => {
        this.setState({fName: e.target.value})
      }
      render() {
        const {fName, lName} = this.state
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React {this.state.name}</h1>
        </header>
        <p className="App-intro">
          To get started, editLdOL <code>src/App.js</code> and save to reload.
        </p>
        <InsertName onLNameChange={this.onLNameChange} onFNameChange={this.onFNameChange} onClick={this.handleClick} fName={fName} lName={lName} />
      </div>
    );
      }
    }

    export default App;

在InsertName组件中：

import React, { Component } from "react";
class InsertName extends Component {
 render() {
return (
  <div>
    First name: <input type="text" name="fname" onChange={this.props.onFNameChange} value={this.props.fName} />
    <br />
    Last name: <input type="text" name="lname" onChange={this.props.onLNameChange} value={this.props.lName} />
    <br />
    <button onClick={this.props.onClick}>Click here!!</button>
  </div>
);
  }
}

export default InsertName;

Answer 2

在父组件上，您声明设置名字和姓氏的方法，例如：

constructor(){
   this.state = { fname: "", lname: "" };
}

changeFirstName = (newName) => {
   this.setState({ fname: newName });
}

changeLastName = (newName) => {
   this.setState({ lname: newName });
}

handleClick = () => {
   console.log("Hey ", this.state.fname, " ", this.state.lname);
}

然后，将它们作为道具传递给子组件：

<InsertName
   onClick={this.handleClick}
   fname={this.state.fname}
   changeFirstName={this.changeFirstName}
   lname={this.state.lname}
   changeLastName={this.changeLastName}
/>

最后，像这样在子组件中访问它们：

<div>
   First name: <input type="text" name="fname" value={this.props.fname} onChange={(event) => this.props.changeFirstName(event.target.value)} />
   <br />
   Last name: <input type="text" name="lname" value={this.props.lName} onChange={(event) => this.props.changeLastName(event.target.value)} />
   <br />
   <button onClick={this.props.onClick}>Click here!!</button>
</div>

Answer 3

您在此处询问的内容实际上是通过子组件更改输入的一种非常常见且标准的方法。您将状态保留在父组件中，将此状态的某些部分和处理函数传递给子组件，然后更新状态。

子组件可以是，大多数情况下应该是无状态的哑组件。因为不需要状态或生命周期方法。
您的输入受到控制。这意味着有一个更改处理程序可以更新您的状态，并且他们将从状态中再次获取值。
您可以按名称更改一个处理函数中的输入。

其余内容在注释中：）顺便说一句，如果您不看官方文档，我强烈建议您先这样做。

class App extends React.Component {
  state = {
    firstName: "",
    lastName: "",
    name: ""
  };

  handleClick = () => {
    const { firstName, lastName } = this.state;
    // We create our name then update our state.
    const name = `${firstName} ${lastName}`;
    this.setState({ name });
  };

  // One handler function to update the state.
  // Using computed property names feature we can use
  // variables for an object key like [name]

  handleChange = e => {
    // Destructuring values from e.target.
    const { name, value } = e.target;
    this.setState({ [name]: value });
  };

  render() {
    const { firstName, lastName, name } = this.state;
    return (
      <div>
        {/* A small condition check for our welcome. If there isn't any
        firstName or lastName, then we render "anonymous". */}
        <h1>
          Welcome,
          {!name ? " anonymous" : name}
        </h1>
        {/* Here, we are passing onClick and onChange handlers. Also our related state pieces. */}
        <InsertName
          firstName={firstName}
          lastName={lastName}
          onClick={this.handleClick}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

const InsertName = props => {
  // More destructuring.
  const { firstName, lastName, onClick, onChange } = props;

  return (
    // One onChange handler for each input.
    // Also, input names should match with the state names.
    <div>
      First name:{" "}
      <input
        type="text"
        name="firstName"
        value={firstName}
        onChange={onChange}
      />
      <br />
      Last name:{" "}
      <input type="text" name="lastName" value={lastName} onChange={onChange} />
      <br />
      <button onClick={onClick}>Click here!!</button>
    </div>
  );
};


ReactDOM.render(<App />, document.getElementById("root"));

<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="root"></div>

将输入字段的值传递给React中的父组件

3 个答案: