将值从窗体传回父级
我正在用一个非常简单的方法把值传回给一个家长，但是我很难理解它是如何做到的。
我正在尝试的应用程序非常简单。一个功能子组件有一个下拉列表，用户可以在其中选择一种颜色来更新主app.js上的状态，这会更改div的背景色。
我希望有人能帮我填空。我知道我需要一个函数来传回值给父对象。但却很难把这些点联系起来。
我可以通过简单地将表单放在app.js中并使用ref来做到这一点，但这个练习的目的是理解如何向父母看重。
感谢react菜鸟提前提供的任何帮助或解决方案！
基本APP.JS组件
import React, { Component } from 'react';
import logo from './friedhead.svg';
import ColourSelect from './ColourSelect/ColourSelect';
import './App.css';
class App extends Component {
state = {
colour: 'Blue'
}
//I need some kind of function here, to pass through as props to update state with the users chosen value from the form!?
}
render() {
const colourSection = {
padding: '30px',
backgroundColor: this.state.colour,
marginTop: '20px',
paddingBottom: '150px'
};
return (
<div className="App">
<div style={colourSection}>
<h3>Don't like this colour?</h3>
<ColourSelect
changeColour={PASS A FUNCTION}
colour={this.state.colour}/>
</div>
</div>
);
}
}
export default App;COLOURSELECT函数组件
import React, { Component } from 'react';
const ColourSelect = ( props ) => {
return (
<div>
//Need to extract the value selected by the user somehow. I tried refs but no use in a functional component...
<form
className="form"
onSubmit={NEED TO REFERENCE THE FUNC AS PROPS HERE?}>
<select
className="textfield">
<option value="" disabled selected>Select a new colour</option>
<option value="Blue">Blue</option>
<option value="Yellow">Yellow</option>
<option value="Orange">Orange</option>
<option value="Yellow">Yellow</option>
</select>
<input
className="mainbtn"
type="submit"
value="Change"/>
</form>
<h1>{props.colour}</h1>
</div>
);
}
export default ColourSelect;在颜色选择和提交时，app.js中的背景颜色内联样式将更新为用户选择。
回答 1
Stack Overflow用户
发布于 2019-04-12 06:43:19
将this.changeColour函数作为道具传递给子组件，如下所示：
changeColour={this.changeColour}。
您现在应该在父组件中创建该函数，如下所示：
const changeColour = (colour) => { // here add some logic like this.setState({ colour }) }。
然后，你可以简单地在一个子组件方法中调用这个函数，使用你在传递它时给出的道具名称-在你的例子中，它应该是props.changeColour() (注意changeColour后面的括号，它表示该函数正在被调用)`。
关于解构：
我写了“你应该”，所以我从我的答案中删除了它，并将在这里回答你的最后一个问题。你不需要在声明子组件的时候去解构道具，但是对于你正在工作的其他程序员来说，这是一种更简洁的方式。你可以这样写：
const ColourSelect = ({ changeColour }) => {
// and then call your function like this
const someFunction = () => {
changeColour() // this is destructured name of function passed in parent component
}
};这是一种从props中提取changeColour并将其添加到changeColour变量的方法。你也可以在下一行写下类似这样的内容：
const { changeColour } = props;
https://stackoverflow.com/questions/55642106
复制相似问题