4 回答
TA贡献1875条经验 获得超5个赞
一种方式(在许多可能的方式中):
export default function Parent() {
const [state, setState] = useState({name: '', age: '', height: '', eyeColor: ''})
const change = prop => ({target}) => setState(state => ({...state,[prop]:target.value}));
return (
<h1>Title</h1>
<ChildComponent label="Name" value={state['name']} onChange={change('name')}/>
<ChildComponent label="Age" value={state['age']} onChange={change('age')}/>
<ChildComponent label="Eye Color" value={state['eyeColor']} onChange={change('eyeColor')}/>
);
}
export default function ChildComponent({label,value,onChange}) {
return (
<label htmlFor={`${label}Input`}>{label}:</label>
<input name={`${label}Input`} value={value} onChange={onChange}/>
);
}
TA贡献1829条经验 获得超7个赞
您可以使用 的函数形式setState
来访问当前状态。
setState
作为第一个参数传递当前状态:
onChange={(e) => setState(currentState => ({...currentState, name: newName}))}
TA贡献1806条经验 获得超8个赞
您可以setState像通过state. 家长:
import React, { useState } from 'react';
import ChildComponent from '../components/ChildComponent
export default function Parent() {
const [state, setState] = useState({name: '', age: '', height: '', eyeColor: ''})
return (
<h1>Title</h1>
<ChildComponent state={state} setState={setState}/>
);
}
孩子:
import React, { useState } from 'react';
export default function ChildComponent({state, setState}) {
return (
<label htmlFor='nameInput'>Name:</label>
<input name='nameInput' value={state.name} onChange={(e) => setState(e.target.value)}/>
);
}
TA贡献1807条经验 获得超9个赞
您可能会受益于利用React.createContext
并React.useContext
在组件之间传递状态。
从文档:
在典型的 React 应用程序中,数据通过 props 自上而下(父到子)传递,但这对于应用程序中许多组件所需的某些类型的 props(例如语言环境首选项、UI 主题)来说可能很麻烦。Context 提供了一种在组件之间共享这些值的方法,而无需显式地通过树的每个级别传递 prop。
下面是一个示例,说明如何使用上下文在 n 层深的组件之间共享状态。
const {
useState,
useEffect,
createContext,
useContext
} = React;
const ComponentContext = createContext();
function Parent() {
const [state, setState] = useState({name: 0, age: 0});
return (
<ComponentContext.Provider value={state}>
<div>Parent</div>
<Child/>
<button
onClick={()=>setState({...state, name: state.name+1})}>
Update Name
</button>
<button
onClick={()=>setState({...state, age: state.age+1})}>
Update Age
</button>
</ComponentContext.Provider>
);
}
function Child() {
const {name} = useContext(ComponentContext);
return <div>
<div>1st Child: {name}</div>
<Child2/>
</div>;
}
function Child2() {
const {age} = useContext(ComponentContext);
return <div>2nd Child: {age}</div>;
}
const rootElement = document.getElementById("root");
ReactDOM.render( <Parent /> , rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>
添加回答
举报