Question

我想在点击子组件时调用父组件方法。单击子组件后，父输入字段中的文本将更改并保存到reducer。但是我的父方法使用的是target.value。我无法通过子组件传递此目标。

我想在单击子组件时调用父组件的方法。单击子组件后，父输入字段中的文本将更改并保存到reducer。但是我的父方法使用的是target.value。

我无法从子组件传递此目标。

Answer 1

据我所知，您要说的是子组件中的按钮应调用2个onchange（）函数，一个是父级的，另一个是输入框的。

父组件

class ParentComponent extends React.Component {
  // ....Parent Component OnChange Declared Here;

  render(){
    return(
      <ChildComponent OnChangeFromParent = {this.onChange()}/>
    )
  }
}

子组件

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

handleChange(event) {
  this.setState({ value: event.target.value });
}

handleSubmit(event) {
  alert('A name was submitted: ' + this.state.value);
  event.preventDefault();
}

render() {
// Calling two functions here on submit button click
  return (
    <form onSubmit="this.props.OnChangeFromParent(); this.handleChangeInputBox();">
      <label>
        Name:
        <input type="text" value={this.state.value} onChange={this.handleChangeInputBox} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
 }
}

希望它会清除空气。

Answer 2

只需将回调函数从父组件传递到子组件

const Parent = props => {

  const callback = ...args => {
    console.log('Ive been called with', args);
  }
  
  return (
    <Child callback={callback} />
  );
};


const Child = props => {
  return (
    <button onClick={props.callback}>Im a button!</button>
  );
}

如何获取目标o父组件

2 个答案: