Question

能否请您告诉我，如果我想将数据从子组件发送到父组件并使用其值。我该怎么办。

对于Ex- 在我的子组件中，有一个复选框。谁的选中或未选中值需要发送给父组件，我将在条件中进一步利用

有可能吗？如果可以，请发送一些链接或摘要

摘要看起来像这样

在父班上

onHandleClick(value) {.....some code}

<ChildComponent onHandleClick={onHandleSaveClick} />

在子类中，看起来像

onCheckBoxHandle() {
.....some code
    }

<input type="checkbox" onClick={this.onCheckBoxHandle} label="Some text" />

但未调用父函数或未调用子函数

感谢您的帮助！

Answer 1

欢迎堆栈溢出！要将数据从子组件发送到父组件，必须在父组件中键入一个函数，然后首先将其作为道具发送到子组件。然后，您可以将这些道具放在子组件中并向其中发送值，然后在主要组件中按需要使用它们并管理您的应用程序。

您将看到我在这里准备的示例是什么样的。

//ChildB component
class ChildB extends React.Component {

  render() {

    var handleToUpdate = this.props.handleToUpdate;
    return ( < div > < button onClick = {
      () => handleToUpdate('someVar')
    } > Push me < /button></div > )
  }
}

//ParentA component
class ParentA extends React.Component {

  constructor(props) {
    super(props);
    var handleToUpdate = this.handleToUpdate.bind(this);
    var arg1 = '';
  }

  handleToUpdate(someArg) {
    alert('We pass argument from Child to Parent: ' + someArg);
    this.setState({
      arg1: someArg
    });
  }

  render() {
    var handleToUpdate = this.handleToUpdate;

    return ( < div >
      <
      ChildB handleToUpdate = {
        handleToUpdate.bind(this)
      }
      /></div > )
  }
}

if (document.querySelector("#demo")) {
  ReactDOM.render( <
    ParentA / > ,
    document.querySelector("#demo")
  );
}

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

<div id="demo">134</div>

Answer 2

您可以通过2个步骤对其进行管理：

1）在父组件中，您需要置位状态。

2）传递给子组件函数作为道具，从而改变父状态。

父组件：

const [state,setState] = useState();

const handleFunction = () => {
setState(someValue)
}
...

<ChildComponent handleFunction={handleFunction} />

子组件：

const {handleFunction} = props

<button onClick={handleFunction}>Some action</button>

Answer 3

可以。您需要将函数从父级传递到子级，并在复选框更改时调用该函数。

function Parent () {
  const onChildChange = (value)=>{
  // do something 
  }

  return <Child onChildChange={onChildChange} />;
}

function Child (props) {
  const [checkbox, setCheckbox] = useState(true);

  const handleChange = () => {
    const target = event.target;
    const value =  target.checked;
    setCheckbox(value);
    props.onChildChange(value);
  };  

return (
  <div>
    <input
      name="isGoing"
      type="checkbox"
      checked={checkbox}
      onChange={handleChange}
    />
  </div>
)}

如何将数据从子组件发送到父组件

3 个答案: