我如何传递一个值从父到子，然后编辑它并传递回React?

Question

使用钩子。父组件向子组件传递一个值，该值由子组件显示。但是我希望这个组件是可编辑的，一旦用户单击保存，它的新值应该被传递回父组件，然后用于更新。

父组件:

const [value, setValue] = useState("");
// value is set by some function
<Child 
value={value}
/>

子组件:

<h2 contentEditable=true >props.value</h2>
// somehow save the value, even to a different variable, and pass it back to parent component to setValue

我尝试在我的子组件文件中设置类似

的东西

const childValue=props.value

或

const [childValue, setChildValue] = useState(props.value)

和我尝试console.log的这些值，但他们都是空的，如果我把它们传递给h2的子组件，什么也不显示。

——编辑我已经尝试通过函数设置值到父，但我正在努力获得改变的值。

对于子组件，我想保存onChange或单击按钮，但我缺少捕获新值的方法。

父组件有一个saveValue(newValue)函数，我将它传递给子组件在子组件

中

const {value, saveValue} = props;
return
<h2 
onChange={() => saveValue(e.target.value)}
contentEditable=true> {value} </h2>

我在父组件中有saveValue，并尝试更改函数以在控制台中打印出参数，但没有记录任何内容。

我还尝试用按钮保存更改，但我没有方法捕获对h2所做的实际更改，因为我的代码看起来像这样:

const {value, setValue} = props;
<h2 contentEditable=true>{value}</h2>
<button onClick={()=>setValue(value)}>Save</button> 

这只是将值设置为旧值，而不是编辑后的值

Answer 1

将setValue作为道具传递给子组件，并在内部调用它。例如:

const ChildComponent = ({value, setValue}) => {
return (
<>
<button onClick={() => setValue('my new value')}>
change value
</button>
<span>{value}</span>
</>
)
}
const ParentComponent = () => {
const [value, setValue] = useState("");
return <ChildComponent value={value} setValue={setValue}/>
}

Answer 2

你可以用两种方法来解决这个问题。这两种方法基本上是一样的，因为你最终传递的是一个函数来处理状态变化。

方法1:创建一个处理程序函数(比如handleValueChange)，在父组件中使用setValue来管理状态更改。然后你可以把这个处理函数传递给子组件。

父组件:

const Parent = () => {
const [value, setValue] = useState("");
function handleChange() {
// Some logic to change the "value" state
setValue("A new value");
}
return <Child value={value} handlerFunction={handleChange} />
}

子组件:

const Child = (props) => {
const { value, handlerFunction } = props;
// Utilize the props as per your needs
return (
<>
<h2 contentEditable>Value: {value}</h2>
<button onClick={handlerFunction}>Change state</button>
</>
);
};

方法2:将setValue函数作为props传递给子组件。

父组件:

const Parent = () => {
const [value, setValue] = useState("");
return <Child value={value} setValue={setValue} />
}

子组件:

const Child = (props) => {
const { value, setValue } = props;
// Utilize the props to change the state, as per your needs
function handleChange() {
setValue("A new value");
}
return (
<>
<h2 contentEditable>Value: {value}</h2>
<button onClick={handleChange}>Change state</button>
</>
);
};