Question

我有App.js文件，它渲染组件A和组件B.B是一个列表，所以我使用map函数来渲染组件C.他们的关系是这样的：

App.js renders
  - A
  - B which renders multiple C in a map function

现在，当我点击包含事件方法调用onTouchTap的组件C时，我需要更新A中的数据。组件C基本上只显示用户名。 A中的文本将使用我在组件C中单击的用户名进行更新。但我不知道如何实现这一目标。

在B中，我按如下方式呈现列表：

return (
    <div>
      <List>
        this.props.users.map((user, i) => {
          return <C onTouchTap={this.props.onUsernameClick} />
        }
      </List>
    </div>
   );

在App.js中，我将其渲染如下：

  <div>
    <A text={this.state.text} />
    <B users={this.state.users} onUsernameClick={this.handleUsernameClick} />
  </div>

但是通过这种方式，我无法传递参数user和i，因此我无法通过正确的用户名点击正确更新A的文字。

解决方案是什么？

Answer 1

使C成为一个组件并使用本地clickHandler; clickHandler =（）=＆gt; {this.props.handleUsernameClick（this.props.user，this.props.index）; };

Answer 2

在C中，添加一个onClick事件处理程序并调用onUsernameClick(clickedUsername)将被点击的用户名传递给传递的函数。在App中，实现handleUsernameClick以接收传递的用户名并使用此值设置状态，该值将传递给A.

handleUsernameClick(clickedUsername){ this.setState(text:clickedUsername)}

Answer 3

编写一个匿名函数，并使用匿名函数中的参数onUsernameClick，event，user调用i。

希望这有帮助！

return (
    <div>
      <List>
        this.props.users.map((user, i) => {
          return <C onTouchTap={(event) => this.props.onUsernameClick(event, user, i)} />
        }
      </List>
    </div>
   );

Answer 4

我最终使用一些参数绑定onUsernameClick，如下所示：

return <C onTouchTap={this.props.onUsernameClick.bind(this, user)} />

然后在App.js中，

<B users={this.state.users} onUsernameClick={this.handleUsernameClick.bind(this)} />

然后在方法handleUsernameClick中，我在App.js的主要组件中设置状态：

handleUsernameClick(user) {
    this.setState({
      text: user.name
    });
  }

下一步是响应组件A中的props更改，记住我已将App.js渲染为：

  <div>
    <A text={this.state.text} />
    <B users={this.state.users} onUsernameClick={this.handleUsernameClick.bind(this)} />
  </div>

所以道具text将根据text中App.js州的更改进行更改。

我需要在组件A中添加方法名componentWillReceiveProps：

  componentWillReceiveProps(nextProps) {
    if (this.props.text !== nextProps.text) {
        // respond to the props change here
    }
  }

每次在其父组件中更改A道具时，

componentWillReceiveProps都会采取行动。

通过这种方式，我可以根据当前组件的子组件的map函数中的事件对兄弟组件进行更改。我的方案是，当我点击列表中的列表项时，将使用列表项名称更新textarea的文本。

Reactjs如何从地图函数中更改兄弟组件中的数据？

4 个答案: