理想的结果是单击列表中的项目时显示字符串。
这是根组件。
const App = () => {
const [click, setClick] = useState(null);
const handleClick = name => {
setClick(name);
};
return (
<div>
<Parent handleClick={handleClick} />
{click && <p>{click} is clicked.</p>}
</div>
);
};
和父组件。
const Parent = ({ handleClick }) => (
<div>
<Child
name="First Item"
handleClick={handleClick("First Item is Clicked!")}
/>
<Child
name="Second Item"
handleClick={handleClick("Second Item is Clicked!")}
/>
<Child
name="Third Item"
handleClick={handleClick("Third Item is Clicked!")}
/>
</div>
);
和子组件。
const Child = ({ name, handleClick }) => <li onClick={handleClick}>{name}</li>;
还有代码沙箱link。
我只是想知道为什么点击永远不会改变结果。
答案 0 :(得分:4)
问题是您没有将函数传递给handleClick
,而是传递了来自父级的评估值。您的代码必须是
import React from "react";
import Child from "./Child";
const Parent = ({ handleClick }) => (
<div>
<Child
name="First Item"
handleClick={() => handleClick("First Item is Clicked!")}
/>
<Child
name="Second Item"
handleClick={() => handleClick("Second Item is Clicked!")}
/>
<Child
name="Third Item"
handleClick={() => handleClick("Third Item is Clicked!")}
/>
</div>
);
export default Parent;
答案 1 :(得分:2)
您正在调用handleClick()
函数,而不是将函数传递给Child组件。使用内联箭头功能包装呼叫。
注意:由于每次渲染父对象时都会重新创建箭头功能,因此,如果您有很多项,或者由于其他原因而不断渲染父对象,则可能会导致性能问题。 / p>
const { useState } = React;
const App = () => {
const [click, setClick] = useState(null);
const handleClick = name => {
setClick(name);
};
return (
<div>
<Parent handleClick={handleClick} />
{click && <p>{click} is clicked.</p>}
</div>
);
};
const Parent = ({ handleClick }) => (
<div>
<Child
name="First Item"
handleClick={() => handleClick("First Item is Clicked!")}
/>
<Child
name="Second Item"
handleClick={() => handleClick("Second Item is Clicked!")}
/>
<Child
name="Third Item"
handleClick={() => handleClick("Third Item is Clicked!")}
/>
</div>
);
const Child = ({ name, handleClick }) => <li onClick={handleClick}>{name}</li>;
ReactDOM.render(
<App />,
root
)
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
另一种解决方案是将函数和文本都传递给Child组件,并让其处理函数调用。在这种情况下,您可以使用useCallback
记住该功能:
const { useState, useCallback } = React;
const App = () => {
const [click, setClick] = useState(null);
const handleClick = name => {
setClick(name);
};
return (
<div>
<Parent handleClick={handleClick} />
{click && <p>{click} is clicked.</p>}
</div>
);
};
const Parent = ({ handleClick }) => (
<div>
<Child
name="First Item"
handleClick={handleClick} text="First Item is Clicked!"
/>
<Child
name="Second Item"
handleClick={handleClick} text="Second Item is Clicked!"
/>
<Child
name="Third Item"
handleClick={handleClick} text="Third Item is Clicked!"
/>
</div>
);
const Child = ({ name, handleClick, text }) => {
const handler = useCallback(() => handleClick(text), [handleClick, text]);
return <li onClick={handler}>{name}</li>;
}
ReactDOM.render(
<App />,
root
)
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>