当单击其他组件的按钮时，我想增加和减少数字

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，当我单击减法按钮.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>
    )
};