如何在react js中获取另一个组件值？

Question

从这个组件中，我将向另一个组件发送数据

function SearchBox() {

    const [keywords, setKeywords] = useState('')

    return (
        <div className="form-group has-feedback">
        <Form >
            <Form.Control
                type='text'
                name='q'
                onChange ={(e) => setKeywords(e.target.value)}
                className = ' ml-sm-5 mt-4 p-3 mb-1 ml-2 Form-control'
                variant="light"                
            >
           
            </Form.Control>

             <Button type='submit' className='ps-5 pt-1 pb-1 mt-3 search-button' 
           variant="light">
             <i class="fas fa-search" variant="info"></i>
            </Button> 
            
        </Form>
        </div>
    )
    
}

export default SearchBox

我希望上面组件的关键字值低于这个组件

function HomeScreen() {
 here I need value from above component 
}

Answer 1

您可以在HomeScreen组件本身中维护keywords状态，而不是将其放在SearchBox中。然后将setKeywords作为道具传递给SearchBox，并从onChange设置它

function HomeScreen() {
 const [keywords, setKeywords] = useState('');
 return <SearchBox onSearch={setKeywords}/>;
}

请参阅此设计模式here