Question

我正在尝试在React中重新创建某人给我的tabs组件，而在使用onClick方法来识别目标时却陷入困境。

这些是我认为与问题相关的代码片段。

如果我在方法中对setState进行硬编码，则会对其进行适当的设置，因此onClick方法正在运行，我不确定如何将要单击的选项卡设置为将状态设置为的东西。 / strong>

在“我的应用”页面上：

changeSelected = (event) => { // event.preventDefault(); this.setState({ selected: event.target.value }) console.log(event.target.value) }; <Tabs tabs={this.state.tabs} selectedTab={this.state.selected} selectTabHandler={() => this.changeSelected}/>

在我的标签页上：

{props.tabs.map(tab => { return <Tab selectTabHandler={() => props.selectTabHandler()} selectedTab={props.selectedTab} tab={tab} /> })}

在我的标签页上：

return ( <div className={'tab active-tab'} onClick={props.selectTabHandler(props.tab)} > {props.tab} </div>

当我console.log（props.tab）或console.log（event.target.value）时，我收到“未定义”

Answer 1

有一些导致这种情况发生的问题。第一个问题是您不会在event.target.value组件中使用Content，因为您不会像在{{1}中那样直接从onClick处理程序中响应DOM click事件。 }，而是处理子组件中的事件。还请记住，Tab仅适用于具有event.target.value属性的输入或类似HTML元素。诸如value或<div>之类的元素将没有<span>属性。

接下来的问题是，您没有将value的{{1}}值传递给tab，然后从Tabs内部传递给它的Content处理程序Content个事件。

此外，changeSelected()，selectTabHandler中的onClick语法无效，您将无法执行来自props的处理程序并传递Tab值。您可以改用onClick={props.selectTabHandler(props.tab)}之类的东西。

props.tab-需要将来自孩子的onClick={() => props.selectTabHandler(props.tab)}值传递给Content：

tab

changeSelected()-需要将来自孩子的render() { return ( <div className="content-container"> <Tabs tabs={this.state.tabs} selectedTab={this.state.selected} selectTabHandler={tab => this.changeSelected(tab)} /> <Cards cards={this.filterCards()} /> </div> ); }传递给Tabs：

tab

渲染项目数组/列表时也不要忘记唯一的selectTabHandler()属性：

const Tabs = props => {
  return (
    <div className="tabs">
      <div className="topics">
        <span className="title">TRENDING TOPICS:</span>
        {props.tabs.map(tab => {
          return (
            <Tab
              selectTabHandler={tab => props.selectTabHandler(tab)}
              selectedTab={props.selectedTab}
              tab={tab}
            />
          );
        })}
      </div>
    </div>
  );
};

export default Tabs;

以下是分叉的CodeSandbox，演示了该功能。

React-使用onClick方法设置目标状态

1 个答案: