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

问题描述 投票：0回答：3

我正在尝试做类似Hello World的事情，但我希望用户能够输入他们的名字和姓氏，然后在父母身上，它会说你好，[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;
reactjs react-component
3个回答
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;
0
投票

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

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);
}

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

<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>
0
投票

你在这里问的实际上是通过子组件改变输入的一种非常常见和标准的方法。您将保持状态在父组件中，将此状态的一些部分和处理程序函数传递给子组件，然后更新状态。

  • 子组件可以是，并且大部分时间应该是无状态的，愚蠢的组件。因为不需要状态或生命周期方法。
  • 您的输入是受控制的。这意味着有一个更改处理程序来更新您的状态，并且它们再次从状态获取值。
  • 您可以通过名称更改一个处理函数中的输入。

其余的是在评论:)顺便说一句，如果你不看官方文档，我强烈建议你先这样做。

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.