主页 / 问题 / 869811
Accepted
Саша Безгин
Asked:2020-08-17 16:51:21 +0000 UTC2020-08-17 16:51:21 +0000 UTC

管理反应列表

  • 772

有没有办法本着反应的精神来管理列表？例如，列表中的每个元素都有一个调用其父级回调的方法，那么父级如何知道哪个元素正在调用它呢？当然，我可以自己做拐杖）但是如果有特殊的方法，我想知道））我在网站上没有找到类似的东西

只是你甚至无法通过道具访问密钥，所以我只是开了一个数字并转向它）这是我的拐杖））但再次，我想把它做得漂亮）

reactjs

2 个回答

  1. Best Answer

    例如，将一个 ID 传递给每个元素并在回调中使用它：

    class Element extends React.Component {
    onClick = () => {
        this.props.onElementAction(this.props.elementNumber);
    }

    render() {
        return (
            <button onClick={this.onClick} />
        );
    }
}

    在父级中，根据收到的 ID 执行操作：

    class ElementsList extends React.Component {
    onElementAction = (elementNumber) => {
        someAction(elementNumber);
    }

    render() {
        return (
            <div>
                <Element 
                    elementNumber = {1}
                    onElementAction = {this.onElementAction}
                />
                <Element 
                    elementNumber = {2}
                    onElementAction = {this.onElementAction}
                />
                <Element 
                    elementNumber = {3}
                    onElementAction = {this.onElementAction}
                />
            </div>
        );
    }
}

    如果将 html 元素用作元素，则可以通过 data- 属性传递标识符。例如：

    在渲染中：

    <input
    data-record-id={1}
    onChange={this.onChange}
/>
<input
    data-record-id={2}
    onChange={this.onChange}
/>
<input
    data-record-id={3}
    onChange={this.onChange}
/>

    在处理程序中：

    onChange = (event) => {
    let recordId = event.target.dataset.recordId;
    someAction(recordId);
}
    • 1

  2. 假设我们想在点击时突出显示一个元素。为此，我们将在state-中创建一个变量activeLi。单击时，我们会将id元素放置在那里，并在渲染时选择它。在后代中，可以简单地挂this.props.onClick在我们需要的元素上，或者一次传递所有属性{...this.props}

    <ul>
   {items.map((Li, i) => 
      <Li 
        key={i}
        onClick={() => this.setState({activeLi: i})}
        style={{background: this.state.activeLi === i? 'firebrick': 'transparent'}}
      />)
   }
</ul>
    • 1

相关问题