如何在onClick上获取li值并动态显示

Question

当用户单击任何一个li时，我试图获取li的值。

为此，我在li上使用onClick方法，并使用e.currentTarget来获取当前li的值，但是我没有得到输出。当用户单击列表项中的任何一个时，应显示该名称。谁能告诉我应该在哪里进行更改？

SearchBox.js

import React, { Component } from "react";
import SourceData from "../assets/continents.json";

class SearchBox extends Component {
 state = {
 value: "",
 sourceData: SourceData,
 filterData: []
 };

 handleChange = e => {
 this.setState({
  filterData: this.state.sourceData
 });
};

filterList = e => {
const updatedList = this.state.sourceData.filter(item => {
  return ( 
   item.continent.toLowerCase().search(e.target.value.toLowerCase()) !== -1
  );
});
this.setState({ filterData: updatedList });
};


itemOnSelection = (e) => {
 console.log(e.currentTarget.dataset);
}

render() {

const {filterData} = this.state;

const searchBox = (
  <input
    type="text"
    onClick={this.handleChange}
    onChange={this.filterList}
  />
);
const selectBox = this.state.filterData.map(option => (
  <li key={option.continent} onClick={this.itemOnSelection} data-set={filterData} >
    {option.continent}
  </li>
));

return (
  <React.Fragment>
    <h2>Step 1</h2>
    <h3>Select a continent.</h3>
    {searchBox}
    itemOnSelection ? {<h4>You Selected {}</h4> } : {selectBox && <ul>{selectBox}</ul>}

  </React.Fragment>
  );
 }
}

export default SearchBox;

continents.json

  [
{
    "continent": "Africa",
    "countries": [
        {
            "name": "Nigeria",
            "flag": ""
        },
        {
            "name": "Ethiopia",
            "flag": ""
        },
        {
            "name": "Egypt",
            "flag": ""
        },
        {
            "name": "DR Congo",
            "flag": ""
        },
        {
            "name": "South Africa",
            "flag": ""
        }
    ]
},
{
    "continent": "America",
    "countries": [
        {
            "name": "USA",
            "flag": ""
        },
        {
            "name": "Brazil",
            "flag": ""
        },
        {
            "name": "Mexico",
            "flag": ""
        },
        {
            "name": "Colombia",
            "flag": ""
        },
        {
            "name": "Argentina",
            "flag": ""
        }
    ]
},
{
    "continent": "Asia",
    "countries": [
        {
            "name": "China",
            "flag": ""
        },
        {
            "name": "India",
            "flag": ""
        },
        {
            "name": "Indonesia",
            "flag": ""
        },
        {
            "name": "Pakistan",
            "flag": ""
        },
        {
            "name": "Bangladesh",
            "flag": ""
        }
    ]
},
{
    "continent": "Europe",
    "countries": [
        {
            "name": "Russia",
            "flag": ""
        },
        {
            "name": "Germany",
            "flag": ""
        },
        {
            "name": "UK",
            "flag": ""
        },
        {
            "name": "France",
            "flag": ""
        },
        {
            "name": "Italy",
            "flag": ""
        }
    ]
},
{
    "continent": "Oceania",
    "countries": [
        {
            "name": "Australia",
            "flag": ""
        },
        {
            "name": "Papua New Guinea",
            "flag": ""
        },
        {
            "name": "New Zealand",
            "flag": ""
        },
        {
            "name": "Fiji",
            "flag": ""
        },
        {
            "name": "Solomon Islands",
            "flag": ""
        }
    ]
}
 ]

预期输出：：

Answer 1

您在这里。有效的解决方案。

import React from "react";
import { render } from "react-dom";
import "./style.css";
import SourceData from "./SourceData.json";

class App extends React.Component {
  state = {
    value: "",
    sourceData: SourceData,
    filterData: []
  };

  onFocus = () => {
    this.setState({
      filterData: this.state.sourceData,
      value: ""
    });
  };

  filterList = e => {
    const updatedList = this.state.sourceData.filter(item => {
      return (
        item.continent.toLowerCase().search(e.target.value.toLowerCase()) !== -1
      );
    });
    this.setState({ filterData: updatedList });
  };

  itemOnSelection = value => {
    this.setState({
      value,
      filterData: []
    });
  };

  render() {
    const searchBox = (
      <input type="text" onFocus={this.onFocus} onChange={this.filterList} />
    );
    const selectBox = this.state.filterData.map(option => (
      <li
        key={option.continent}
        onClick={() => this.itemOnSelection(option.continent)}
      >
        {option.continent}
      </li>
    ));

    return (
      <React.Fragment>
        <h2>Step 1</h2>
        <h3>Select a continent.</h3>
        {searchBox}
        {selectBox && <ul>{selectBox}</ul>}
        {this.state.value && <h4>You Selected {this.state.value}</h4>}
      </React.Fragment>
    );
  }
}

render(<App />, document.getElementById("root"));

Answer 2

您不必访问e.currentTarget，只需使用

onClick={this.itemOnSelection.bind(option.continent)}在您的li上，像这样：

  <li key={option.continent} onClick={this.itemOnSelection.bind(option.continent)} data-set={filterData} >
    {option.continent}
  </li>

然后：

itemOnSelection = (selected) => {
 console.log(selected);
}