我想在单击其他组件的按钮时递增和递减数字

Question

counterScreen.js

import React, { useState } from "react";

const CounterScreen = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <h2>This the number: {count}</h2>
        </div>
    ) }

export default CounterScreen

addButton.js

import React from 'react'

const AddButton = () => {
    return (
        <div>
            <button>+</button>
        </div>
    ) }

export default AddButton

subtractButton.js

import React from 'react'

const SubtractButton = () => {
    return (
       <div>
            <button>-</button>
        </div>
    ) }

export default SubtractButton

我希望当我单击addbutton.js中的按钮时，计数器应加1，而当我单击subtractbutton.js中的按钮时，计数器应减1

在这里分享状态最好的方式是什么，请帮助

Answer 1

解决此问题的一种简单方法是将状态放在包含组件中，并将值或回调传递给相关组件：

const Counter = () => {
    const [count, setCount] = useState(0);
    return (
        <div>
            <CounterScreen count={count}/>
            <AddButton onClick={() => setCount(count+1)}/>
            <SubtractButton onClick={() => setCount(count-1)}/>
        </div>
    );
};

const CounterScreen = ({count}) => {
    return (
        <div>
            <h2>This the number: {count}</h2>
        </div>
    )
};

const AddButton = ({onClick}) => {
    return (
        <div>
            <button onClick={onClick}>+</button>
        </div>
    )
};

const SubtractButton = ({onClick}) => {
    return (
        <div>
            <button onClick={onClick}>-</button>
        </div>
    )
};