编辑

Question

我有一个名为App的父组件，还有一个名为Left的子组件。

Left组件具有两个分别称为Settings和NotesList

的组件

class Left extends Component {
  constructor() {
    super();

    this.state = { isAddNewNoteClicked: false };
  }

  render() {
    return (
      <section>
        <Settings onNew={this.onNewNote.bind(this)} />
        <NotesList newNote={this.state.isAddNewNoteClicked} />
      </section>
    );
  }

  onNewNote = (isAddNewNoteClicked) => {
    this.setState({ isAddNewNoteClicked });

    {/* SEE EDIT */}
    {/* this.props.onNewNote(this.state.isAddNewNoteClicked); */}

    {/* SEE EDIT #2 */}
    this.props.onNewNote(isAddNewNoteClicked);
  }
}

Settings组件具有一个按钮，当单击该按钮时，会将isAddNewNoteClicked传递为true。

状态正在顺利传递到Left ，但是我的问题是将isAddNewNoteClicked从Left传递到App。 / p>

<App />看起来像这样

class App extends Component {
  constructor() {
    super();

    this.state = { isAddNewNoteClicked: false };
  }

  onNewNote = () => {
    console.log('test');
  }

  testFunction(a) {
    console.log('test', a);
  }

  render() {
    return (
      <main className="App">
        <Left onNew={this.testFunction.bind(this)} />
        <Right isAddNewNoteClicked={ this.state.isAddNewNoteClicked } />
      </main>
    );
  }
}

编辑

所以我在this.props.onNewNote(this.state.isAddNewNoteClicked);组件的onNewNote函数中添加了<Left />，现在正在调用该函数，但是''的状态没有被更新...

编辑＃2

我添加了变量本身而不是状态中的变量，而不是this.props.onNewNote(this.state.isAddNewNoteClicked);。

Answer 1

您的Left组件未调用通过App的prop传递给它的onNew函数。这部分

onNewNote = (isAddNewNoteClicked) => {
  this.setState({ isAddNewNoteClicked });
}

仅会在您调用this.props.onNew（）

之前为“左”设置状态。

编辑

在左侧

onNewNote = (isAddNewNoteClicked) => {
  this.setState({ isAddNewNoteClicked });
  this.props.onNew(isAddNewNoteClicked); // Notice you calling it "onNew", not "onNewNote"
}

在应用上

testFunction(isAddNewNoteClicked) {
  this.setState({ isAddNewNoteClicked })
}

Answer 2

好的，所以添加这一行

this.props.onNewNote(isAddNewNoteClicked);

我的onNewNote()上<Left />函数上的

已解决了该问题。

希望它对其他人有所帮助！

Answer 3

为此，父级已将值作为道具发送给其子级。因此，我们可以通过props在子组件中得到它。

通过以下方式。

bibliography.bib

如何将状态从子组件传递到父组件？

3 个答案:

编辑