Question

我的property 'sonar.coverage.jacoco.xmlReportPaths', "${buildDir}/reports/jacoco/test/jacocoTestReport.xml"组件中有一个select标记，并且当Dropdown的值更改时，状态更改为所选选项：（select是一个选择样式化组件）

StyledDropdown

，我还有一个父组件（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的值。

我该如何在它们之间共享状态（孩子与父母）。

Answer 1

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

这意味着您的状态应该在App.js中，并且您的选择应该受到控制（通过props接收值并更改回调）：

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

react中的传递状态应该仅在父母与孩子之间发生。

在您的情况下，您可以将const [chosenCity, setChosenCity] = useState("london")移至App.js，然后将updater函数传递给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

如何在React中将状态（选择值）传递给父级（挂钩）

2 个答案: