在 React 中，我有类似的文件
--parent.js
--child.js
--App.js
parent.js包含文本框和按钮
child.js包含 P 标签
App.js包含父组件和子组件
问题
在按钮单击时将来自父级的文本框值传递给子级并在子段落标记中显示该值。
完整代码 堆栈闪电战
react | 将数据从父组件传递给子组件
IT技术
reactjs
react-props
2021-03-27 04:25:50
4个回答
更新您的示例以将数据传递给子组件。
https://stackblitz.com/edit/react-trmj9i?file=child.js
在下面添加代码以供快速参考
索引.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import Parent from './parent';
import Child from './child';
import './style.css';
class App extends Component {
constructor() {
super();
this.state = {
name: 'React',
parentTextBoxValue: ''
};
}
handleParentData = (e) => {
this.setState({parentTextBoxValue: e})
}
render() {
return (
<div>
<Parent handleData={this.handleParentData} />
<Child parentTextBoxValue={this.state.parentTextBoxValue}/>
</div>
);
}
}
render(<App />, document.getElementById('root'));
父.js
import React, { Component } from 'react';
import Button from 'react-uikit-button';
class Parent extends Component {
constructor(props){
super(props);
this.state={TextBoxValue: ""}
}
SubmitValue = (e) => {
this.props.handleData(this.state.TextBoxValue)
}
onChange=(e)=>{
this.setState({TextBoxValue: e.target.value})
}
render() {
return (
<div className="">
<input type="text" name="TextBox" onChange={this.onChange}
/>
<Button onClick={this.SubmitValue}>Submit Value</Button>
</div>
);
}
}
export default Parent;
child.js
import React, { Component } from 'react';
class Child extends Component {
constructor(props){
super(props);
}
render() {
return (
<div className="App">
<p>{this.props.parentTextBoxValue}</p>
</div>
);
}
}
export default Child;
只是为了说明我所做的，将一个函数从 App.js 传递给父级，这可以帮助提升状态。在父组件中处理文本框的 onchange 和提交更新的应用程序状态。最后将此状态传递给子组件。
import React from "react";
class Parent extends React.Component(){
constructor(props){
super(props);
this.state={
name:"suraj"
}
}
render(){
return(
<div className = "parent">
<child data={this.state.name}/>
</div>
);
}
}
export default Parent;
export function Child(props){
return(
<div>{props.data}</div>
);
}
在父组件内
import React, { useState } from "react";
import Child from "./Child";
export default function App() {
const [value, setValue] = useState("");
const handleInputChange = event => {
const { value } = event.target;
setValue(value);
};
const handleSubmit = event => {
event.preventDefault();
console.log(value);
};
return (
<div className="App">
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
placeholder="Name"
onChange={handleInputChange}
/>
<button type="submit">Submit</button>
</form>
<Child data={value} />
</div>
);
}
在子组件内
import React from "react";
export default function Child({ data }) {
return (
<div className="App">
<h1>Hello Child</h1>
<p>{data}</p>
</div>
);
}
单击按钮时，您应该能够获取文本框的值并使用该setState函数将其添加到父状态。
之后，应该调用您父母的渲染方法；因为，状态变了。然后，您可以将状态中保存的值放入子元素的属性中。
<child message={value}>
之后，您可以通过 child 中的 props 访问该消息。
class child extends Component {
render(){
//use this.props.message to access message
}
}
从那里你可以用这个值做任何你想做的事情。