加載屏幕時如何將子屬性/值傳遞給父組件

Question

加載React應用后，如何從子組件向父組件發送屬性值？ 我有一個名為app.js的父組件，它呈現了一個包含JSON組件的home組件。 加載React應用后，我的屬性JSONValue（在app.js中定義）包含一個空字符串。 加載react應用后，父組件中的JSONValue應該包含子JSON組件中已經定義的值。 如何在初始渲染時將這些值從JSON組件發送到APP組件？

我現在可以做到這一點的唯一方法是更改​​react app-> json組件中的值。 然后它將值從子級發送到父級。

因此：JSONValue的值在JSON組件中定義，並且僅在JSON組件發生更改時才應用於app.js中的JSONValue。 應在react應用加載后立即應用。

APP.JS：

import React, { Component } from 'react';
import Home from './Components/Home';
import './App.css';


class App extends Component 
{
  constructor(props) {
    super(props);
    this.state = {

      JSONValues: {
        JSONValue: ""
      }
    }

    this.changeJSON = this.changeJSON.bind(this);



changeJSON(e, JSONId)
{
  const elem = e.target;
  const JSONValue = elem.value;

  let tmpJSONValues = this.state.JSONValues;
  tmpJSONValues[JSONId] = JSONValue;

  this.setState(prevState => ({
    JSONValues: tmpJSONValues
  }));
}

  render() {
    return (
        <div>
          <Home 
            JSONValues={this.state.JSONValues}
            changeJSON={this.changeJSON}
          />
        </div>
    )
  }
}

export default App;

HOME.JS：返回：

<div>
  <JSON
    JSONValues={props.JSONValues} 
    changeJSON={props.changeJSON}
   />
</div>

JSON.JS：

    import React, { Component } from 'react';

    export default class JSON extends Component {
        render() {
            let JSONValue = "";

            if(this.props.JSONValues){
                JSONValue = this.props.JSONValues.JSONValue;
            }

            JSONValue = 'value';

            return (
                <div>
                    <textarea className="json" spellCheck={false}  value={JSONValue}  onChange={(e) =>this.props.changeJSON(e, 'JSONValue')}>

                    </textarea>
                </div>
            )
        }
    }

Answer 1

通常，您在父組件中創建狀態，然后通過道具將數據傳遞給子組件。

在父級中，您還創建了一個changeStateHandler，還通過prop傳遞給了子級組件。

當子項需要更新其狀態時，它將使用傳入的changeStateHandler。 父母隨后更新其狀態，並將新狀態通過道具傳遞回孩子。 當孩子得到新的道具時，他會放棄。

這是一個簡單的示例：

Demo.js

import React, {useState} from 'react';

export const Parent = () => {
    const [counter, setCounter] = useState(0);
    return (
      <div>
          <div>Parent says the count is now: {counter}</div>
          <Child counter={counter} handleCounter={setCounter} />
      </div>
    );
};

const Child = ({counter, handleCounter}) => {
    const incrementCounter = () => handleCounter(counter++); 
    const decrementCounter = () => handleCounter(counter--);
    return (
        <div>
            <button onClick={incrementCounter}>+</button>
            <button onClick={decrementCounter}>-</button>
        </div>
    );
};

Answer 2

通過子道具傳遞一個函數，以在安裝時設置父狀態，如下所示：

 class Child extends React.Component { componentDidMount(){ const jsonString = '{"foo":"bar"}'; this.props.onMount(jsonString) } render() { return null; } } class App extends React.Component { state = { jsonData: null } setJson = jsonData => this.setState({ jsonData }); render(){ return ( <div> <span>parent's state jsonData:</span> <pre>{this.state.jsonData}</pre> <Child onMount={this.setJson} /> </div> ) } } ReactDOM.render(<App/>, document.getElementById('root')) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>