React 如何将数据从组件传递到另一个组件

Question

How to pass data between React components, for example I have two component the first one called 'ButtonComp' and the second is 'InputComp', ButtonComp have one button that change the background color and the InputComp have one input filed now I want to take the string form the InputCome component and send it to ButtonComp, so when the user type 'green' in the InputComp and click the button its change the color, what is the approach for this.

Answer 1

similar to benjamins, slight different in passing props:)

 const {useState} = React; const App = () => { const [bg, setBg] = useState(""); const [color, setColor] = useState(""); return ( <div style={{background: bg, height: "100vh"}}> <InputComp color={color} setColor={setColor}/> <br/> <br/> <ButtonComp color={color} setBg={setBg}/> </div> ); }; const ButtonComp = ({color, setBg}) => { return(<button onClick={()=> setBg(color)}>{color? `Click to change BG to ${color}`: "Please Input & Click to change BG"}</button>) } const InputComp = ({setColor, color}) => { return(<input type="text" value={color} onChange={(e)=>setColor(e.target.value)} />) } // Render it ReactDOM.createRoot( document.getElementById("root") ).render( <App/> );

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Answer 2

In order to share "state" between components, you need to "lift state up". This means creating state in a component that is rendered higher in the component tree, than the components that need to share that state.

In the example below. State is held in the App component, and is passed down to the InputComp component, and shared into the click handler for ButtonComp component.

When ButtonComp is clicked, the input state is copied to the background state, which is then rendered into the css on the div component.

This is a very basic example, but demonstrates how to accomplish your goal.

 const InputComp = (props) => { return <input {...props} />; }; const ButtonComp = (props) => { return <button {...props} />; }; const App = (props) => { const [background, setBackground] = React.useState('') const [input, setInput] = React.useState('') return ( <div style={{ background: background }}> <div> <InputComp value={input} onChange={(e) => setInput(e.target.value)} /> </div> <div> <ButtonComp onClick={() => setBackground(input)}>Submit</ButtonComp> </div> </div> ); }; ReactDOM.createRoot(document.getElementById('root')).render(<App />);

 <div id="root" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>