我在同一组件中发送道具时遇到问题,并且该功能不是功能问题。那么如何解决这个问题呢?
import React, { useState } from 'react';
export default function Lifting() {
const [data, setData] = useState(0);
function globalChange(items) {
setData({ data: items });
}
return (
<div>
<h1>Lifting State Up</h1>
<LiftingChild val={data} onChange={globalChange} />
<br />
<LiftingChild val={data} onChange={globalChange} />
</div>
)
}
function LiftingChild(props) {
return (
<div>
<input value={props.val} onChange={(e) => { props.globalChange(e.target.value) }} />
</div>
)
}
这只是一个命名问题。当您使用
LiftingChild
组件时,您添加 globalChange
作为 onChange 属性,但在 LiftingChild
组件中,您尝试调用不存在的 globalChange
。您需要将其称为 props.onChange
。
<input value={props.val} onChange={(e) => { props.onChange(e.target.value) }} />
编辑: 这表明 setData 的调用方式也是不正确的。您将新状态设置为一个对象,但它应该只是数字,以便它可以继续在表单状态下使用。
function globalChange(item) {
setData(item);
}
请注意,由于两个子组件都使用相同的状态,因此更新一个子组件将同时更新两个子组件。这可能是可取的,也可能不是,具体取决于用例。
把它们放在一起应该看起来像这样:
const { useState } = React;
function Lifting() {
const [data, setData] = useState(0);
function globalChange(items) {
setData(items);
}
return (
<div>
<h1>Lifting State Up</h1>
<LiftingChild val={data} onChange={globalChange} />
<br />
<LiftingChild val={data} onChange={globalChange} />
</div>
)
}
function LiftingChild(props) {
return (
<div>
<input value={props.val} onChange={(e) => { props.onChange(e.target.value) }} />
</div>
)
}
ReactDOM.render(<Lifting />, document.getElementById('react'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
const { useState } = React;
function Lifting() {
const [data, setData] = useState(0);
function globalChange(items) {
setData(items);
}
return (
<div>
<h1>Lifting State Up</h1>
<LiftingChild val={data} onChange={globalChange} />
<br />
<LiftingChild val={data} onChange={globalChange} />
</div>
)
}
function LiftingChild(props) {
return (
<div>
<input value={props.val} onChange={(e) => { props.onChange(e.target.value) }} />
</div>
)
}
ReactDOM.render(<Lifting />, document.getElementById('react'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>