reactjs 怎样实现多个按钮中，每次点击其中任意一个按钮，只改变其背景色，并将其按钮的内容显示在文本域内

```c
import { Button } from "antd";
import React from "react";


export class Inputt extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            textareaValue: "",
        }

    }

    render() {
        const buttonOnClick = (e) => {
            console.log(e.currentTarget.value);
            this.setState({
                textareaValue: e.currentTarget.value
            })
        }
        
        const textareaonChange = (e) => {
            this.setState({
                textareaValue: e.target.value
            })
        }
        return (
            <>
                <Button style = {{background: white}}
                              shape='round' 
                                               onClick={(e) => buttonOnClick(e) 
                                  




                <Button shape='round' onClick={(e) => buttonOnClick(e) }  value="重复授权">重复授权</Button>
                <Button shape='round' onClick={(e) => buttonOnClick(e) }  value="授权死循环">授权死循环</Button>
                <Button shape='round' onClick={(e) => buttonOnClick(e) }  value="应用截图与demo不一致">应用截图与demo不一致</Button>
                <Button shape='round' onClick={(e) => buttonOnClick(e) }  value="页面无法打开">页面无法打开</Button>
                <hr></hr>
                <textarea style={{width:500}} value={this.state.textareaValue} onChange={(e) => textareaonChange(e)}></textarea>
            </>

        )
    }
}

```

测试题主代码没问题，至于背景色用3元运算符判断下和当前按钮值一致设置下背景色
有帮助或启发麻烦点个采纳【本回答右上角】，谢谢~~

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>启动页面</title>

    <!--React相关的依赖-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>

    <!--自定义的jsx-->
    <script type="text/jsx;harmony=true">
 class Inputt extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            textareaValue: "",
        white:'#f00'
        }

    }

    render() {
        const buttonOnClick = (e) => {
            console.log(e.currentTarget.value);
            this.setState({
                textareaValue: e.currentTarget.value
            })
        }

        const textareaonChange = (e) => {
            this.setState({
                textareaValue: e.target.value
            })
        }
        return (
            <div>
                <button style = {{background: this.state.textareaValue=='过度授权'?'#f00':''}} shape='round' onClick={(e) => buttonOnClick(e) }  value="过度授权">过度授权</button>
                <button style = {{background: this.state.textareaValue=='重复授权'?'#f00':''}} shape='round' onClick={(e) => buttonOnClick(e) }  value="重复授权">重复授权</button>
                <button style = {{background: this.state.textareaValue=='授权死循环'?'#f00':''}} shape='round' onClick={(e) => buttonOnClick(e) }  value="授权死循环">授权死循环</button>
                <button style = {{background: this.state.textareaValue=='应用截图与demo不一致'?'#f00':''}} shape='round' onClick={(e) => buttonOnClick(e) }  value="应用截图与demo不一致">应用截图与demo不一致</button>
                <button style = {{background: this.state.textareaValue=='页面无法打开'?'#f00':''}} shape='round' onClick={(e) => buttonOnClick(e) }  value="页面无法打开">页面无法打开</button>
                <hr></hr>
                <textarea style={{width:500}} value={this.state.textareaValue} onChange={(e) => textareaonChange(e)}></textarea>
            </div>

        )
    }
}

ReactDOM.render(
            <Inputt/>,
            //这里的 content 就是刚刚我们定义的div 的 id
            document.getElementById('content')
        );


    </script>
</head>
<body>
    <!--配制dom一个标签-->
    <div id="content"></div>
</body>
</html>

我只能将一个的按钮显示在文本域内，也不能改变颜色