如何将 state（选择值）传递给 React（钩子）中的父级

Question

I have a select tag in my Dropdown component, and when the select 's value changes, the state changes to the selected option: ( StyledDropdown is a select styled-component)

const Dropdown = () => {

const [chosenCity, setChosenCity] = useState("london")

const handleChange = (e) => {
    setChosenCity(e.target.value)
}

return (
    <StyledDropdown name="cities" id="cities" onChange={handleChange} value={chosenCity}>
        <option id="def" value="london" style={{appearance: "none", background: "rgba(0, 0, 0, .7)"}}>London</option>
        <option id="2" value="paris" style={{appearance: "none", background: "rgba(0, 0, 0, .7)"}}>Paris</option>
        <option id="3" value="tlv" style={{appearance: "none", background: "rgba(0, 0, 0, .7)"}}>Tel Aviv</option>
        <option id="4" value="ny" style={{appearance: "none", background: "rgba(0, 0, 0, .7)"}}>New York</option>
        <option id="5" value="tokyo" style={{appearance: "none", background: "rgba(0, 0, 0, .7)"}}>Tokyo</option>
    </StyledDropdown>
)
}

export default Dropdown

而且我还有一个父组件（ App.js ）需要获取chosenCity的值。

我如何在他们之间共享 state（孩子到父母）。

Answer 1

我还有一个父组件 ( chosenCity ) 需要获取 selectedCity 的值。

这意味着您的 state 应该在App.js中，并且您的 select 应该受到控制（通过道具接收值并更改回调）：

const App = () => {
    const [city, setCity] = useState("london");

    return (
        <Dropdown value={city} onChange={event = setCity(event.target.value)} />
    );
};


const Dropdown = ({value, onChange}) => (
    <StyledDropdown name="cities" id="cities" onChange={onChange} value={value}>
        <option id="def" value="london" style={{appearance: "none", background: "rgba(0, 0, 0, .7)"}}>London</option>
        <option id="2" value="paris" style={{appearance: "none", background: "rgba(0, 0, 0, .7)"}}>Paris</option>
        <option id="3" value="tlv" style={{appearance: "none", background: "rgba(0, 0, 0, .7)"}}>Tel Aviv</option>
        <option id="4" value="ny" style={{appearance: "none", background: "rgba(0, 0, 0, .7)"}}>New York</option>
        <option id="5" value="tokyo" style={{appearance: "none", background: "rgba(0, 0, 0, .7)"}}>Tokyo</option>
    </StyledDropdown>
)

Answer 2

在反应中传递 state 应该只发生在父子之间。

在您的情况下，您可以将const [chosenCity, setChosenCity] = useState("london")移动到 App.js，然后将更新程序 function 传递给 Dropdown：

const Dropdown = ({chosenCity, setChosenCity }) => {

const handleChange = (e) => {
    setChosenCity(e.target.value)
}

return (
    <StyledDropdown name="cities" id="cities" onChange={handleChange} value={chosenCity}>
        <option id="def" value="london" style={{appearance: "none", background: "rgba(0, 0, 0, .7)"}}>London</option>
        <option id="2" value="paris" style={{appearance: "none", background: "rgba(0, 0, 0, .7)"}}>Paris</option>
        <option id="3" value="tlv" style={{appearance: "none", background: "rgba(0, 0, 0, .7)"}}>Tel Aviv</option>
        <option id="4" value="ny" style={{appearance: "none", background: "rgba(0, 0, 0, .7)"}}>New York</option>
        <option id="5" value="tokyo" style={{appearance: "none", background: "rgba(0, 0, 0, .7)"}}>Tokyo</option>
    </StyledDropdown>
)
}

export default Dropdown