Question

我遇到了创建功能组件以渲染下拉菜单的问题，但是我无法更新主App.JS中的初始状态。除非它在同一组件中，否则我真的不确定如何更新状态。

这是我的App.js的一个片段，在这里我初始化了项目数组并调用了功能组件。

const items = [
  {
    id: 1,
    value:'item1'
  },
  {
    id: 2,
    value:'item2'
  },
  {
    id: 3,
    value:'item3'
  }
  
]

class App extends Component{

    state = {
      item: ''
    }
    
    ...
    
    render(){
      return{
        <ItemList title = "Select Item items= {items} />

这是我的功能组件。本质上是我观看过的YouTube教程（https://www.youtube.com/watch?v=t8JK5bVoVBw）的下拉菜单。

function ItemList ({title, items, multiSelect}) {
    
    const [open, setOpen] = useState (false);
    const [selection, setSelection] = useState([]);
    const toggle =() =>setOpen(!open);

    ItemList.handleClickOutside = ()=> setOpen(false);

    function handleOnClick(item) {
        if (!selection.some(current => current.id == item.id)){
            if (!multiSelect){
                setSelection([item])
            }
            else if (multiSelect) {
                setSelection([...selection, item])
            }
        }
        else{
            let selectionAfterRemoval = selection;
            selectionAfterRemoval = selectionAfterRemoval.filter(
                current =>current.id == item.id
            )
            setSelection([...selectionAfterRemoval])
        }

    }

    function itemSelected(item){
        if (selection.find(current =>current.id == item.id)){
            return true;
        }
        return false;
    }



    return (
        <div className="dd-wraper">
            <div tabIndex={0} 
            className="dd-header" 
            role="button" 
            onKeyPress={() => toggle(!open)} 
            onClick={() =>toggle(!open)}
            onChange={(e) => this.setState({robot: e.target.value})}
            >



                <div className="dd-header_title">
                    <p className = "dd-header_title--bold">{title}</p>
                </div>
                <div className="dd-header_action">
                    <p>{open ? 'Close' : 'Open'}</p>
                </div>
                </div>
                {open && (
                    <ul className ="dd-list">
                        {item.map(item =>(
                            <li className="dd-list-item" key={item.id}>
                                <button type ="button" 
                                onClick={() => handleOnClick(item)}>
                                    <span>{item.value}</span>
                                    <span>{itemSelected(item) && 'Selected'}</span>
                                </button>
                            </li>
                        ))}
                    </ul>
                )}
                </div>
    )
}
const clickOutsideConfig ={
    handleClickOutside: () => RobotList.handleClickOutside
}

我尝试传递道具并使功能组件中的状态发生变化，但没有任何改变。我怀疑需要在itemSelected函数中对其进行更改，但是我不确定如何更改。任何帮助将不胜感激！

Answer 1

因此，您需要执行以下操作。在这里，我们将父组件中的handleChange作为道具传递给子组件，在子组件中，我们将方法称为 props.onChange

父项：

  class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value :''
    }
  }
  
  handleChange = (newValue) => {
    this.setState({ value: newValue });
  }
 
  render() {
    return <Child value={this.state.value} onChange = {this.handleChange} />
  }
}

子组件：

function Child(props) {
    function handleChange(event) {
        // Here, we invoke the callback with the new value
        props.onChange(event.target.value);
    }
  
    return <input value={props.value} onChange={handleChange} />
}

如何在React中更新功能组件中的状态？

1 个答案: