useState不使用组件更新状态

Question

我尝试在React.js上创建一个简单的计数器应用程序。我的代码如下:

计数器页

import React, { useState } from 'react';
import {Button} from '../components/Button/Button';
export const CounterPage = () => {
const [counter, setCounter ] = useState(0);
return (
<>
<div className="container" style = {{textAlign : 'center'}}>
<h2>Counter Page</h2>
<h3>{counter}</h3>
<Button onClick = {() => setCounter(0)} value = 'reset' />
<Button onClick = {() => setCounter(counter - 1)} value = '-'/>
<Button onClick = {() => setCounter(counter + 1)}  value = '+'/> 
</div>
</>
)
}

按钮组件

import React from 'react';
import styles from './Button.module.css';
export const Button = (props) => {
return (
<button 
className = {props.value === '+' ? styles.addButton : styles.subButton} 
type = "button"
>{props.value}</button>
)
}

我使用useState钩子来更新状态，但它不会更新它。但是如果我用

<button onClick = {() => setCounter(0)}>reset</button>
<button onClick = {() => setCounter(counter - 1)}>-</button>
<button onClick = {() => setCounter(counter + 1)}>+</button>

不是

<Button onClick = {() => setCounter(0)} value = 'reset' />
<Button onClick = {() => setCounter(counter - 1)} value = '-'/>
<Button onClick = {() => setCounter(counter + 1)}  value = '+'/>

它的工作原理。你能解释一下原因吗?提前谢谢。

Answer 1

既然您已经制作了自己的组件，那么您的<Button>组件也需要接受onClick的prop:

import React from 'react';
import styles from './Button.module.css';
export const Button = (props) => {
return (
<button 
className = {props.value === '+' ? styles.addButton : styles.subButton} 
type = "button"
onClick={props.onClick}
>{props.value}</button>
)
}

现在，在你的第二个代码块中，onClick没有绑定到任何东西…它只是一个永远不会被利用的道具，这就是为什么它不起作用。你使用useState和setCounter的方式都是正确的。

Answer 2

你可以使用的另一种干净的方法是分散道具并添加到按钮中，这样你的按钮组件更容易配置。

,

.....
<Button onClick = {() => setCounter(0)} className={styles.addButton}  />
<Button onClick = {() => setCounter(counter - 1)} className={styles.subButton} />
....

和Button组件

export const Button = ({value, ...buttonProps}) => {
return (
<button 
{...buttonProps}, // here use the spread operator
type = "button"
>{value}</button>
)
}

例子