Question

我是新来的人。非常感谢您的帮助。我有一个要过滤的列表，我想为列表中的每个项目单击它，这样它将在右侧打开一个页面。

当前，单击导致列表消失。我认为过滤列表上有一个问题。

class MyApp extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            MyList: [
                'A',
                'B',
                'C'
            ],
            filter: "",
            selectedItem: ""
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleFilter = (newFilter) => {
        this.setState(() => ({
            filter: newFilter
        }));
    }

    handleClick(selectedItem) {
        this.setState((prevstate) => ({
            MyList: selectedItem
        }));
    }

    render() {

        const filteredList = this.state.MyList.filter(section =>
            section.toLowerCase().includes(this.state.filter.toLowerCase()))

        return (
            <div>
                {<Filter handleFilter={this.handleFilter} />}
                {filteredList.map((listItem, i) =>
                    <p onClick={() => this.handleClick(i)}>{listItem}</p>)}
            </div>
        )
    }
}


const Filter = (props) => (
    <div>
        <input name="filter" onChange={(e) => {
            props.handleFilter(e.target.value);
        }} />
    </div>
);


ReactDOM.render(<MyApp />, document.getElementById('root'));

Answer 1

您不是在onClick函数中将列表从初始数组重置为字符串吗？因此，在重新渲染时，您将拥有一个字符串作为MyList。应该是

handleClick(selectedItem) {
    this.setState((prevstate) => ({
      MyList: [selectedItem]
  }));  }

希望有帮助

反应点击过滤列表

1 个答案: