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

Posted 2023-02-22

【中文标题】当单击其他组件的按钮时，我想增加和减少数字

【英文标题】：i want to increment and decrement the number when the button from other component is clicked

【发布时间】：2021-09-16 09:01:15

【问题描述】：

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

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

【问题讨论】：

如果可以在codesandbox添加代码会更容易理解

这能回答你的问题吗？ What is useState() in React?

这三个组件之间有什么关系？

【参考方案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>
    )
;

【讨论】：

在此之后只传递 coounter 作为 index.js 中的一个组件，因为它包含其他组件？？

如果您愿意，可以将所有这四个组件拆分为单独的文件，具体取决于您希望如何重用它们；我只是显示功能代码，而不是 import/export 等。

它确实对我有用，再次感谢我现在有了更好的理解，再次感谢