基本APP.JS组件

Question

我正在很简单地将值传递回父级，但是很难理解它是如何完成的。

我正在尝试的应用程序非常简单。功能性子组件具有一个下拉菜单，用户可以在其中选择颜色以更新主app.js上的状态，从而更改div的背景颜色。

我希望有人可以填补空白。我知道我需要一个将值传递回父级的函数。但是在连接点时遇到了麻烦。

我可以通过简单地将表单放在app.js中并使用ref来做到这一点，但是对我自己而言，此练习的重点是理解如何重视父母。

感谢反应型菜鸟提供的任何帮助或解决方案！

基本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;

颜色选择功能组件

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中的背景颜色内联样式将更新为用户选择。

Answer 1

您正在将this.changeColour函数作为对子组件的支持，如下所示：

changeColour={this.changeColour}。

您现在应该像这样在父组件中创建该函数：

const changeColour = (colour) => { // here add some logic like this.setState({ colour }) }。

然后，您可以简单地使用传递给您的props名称在子组件方法之一中调用该函数-在您的示例中为props.changeColour()（请注意changeColour之后的括号表示该函数正在被调用） `。

关于销毁：

我写了“你应该”，所以我从答案中删除了它，并将在这里回答您的最后一个问题。在声明子组件时不必破坏props，但是对于正在使用的其他程序员而言，这是一种更干净的方法。您可以这样写：

const ColourSelect = ({ changeColour }) => { 
// and then call your function like this 
 const someFunction = () => {
   changeColour() // this is destructured name of function passed in parent component
 }
};

这是告诉道具取changeColour并将其添加到changeColour变量中的方法。您还可以在下一行中编写如下内容：

const { changeColour } = props;

将值从表单传递回父级

基本APP.JS组件

颜色选择功能组件

1 个答案: