Terryzjh 2021-09-15 20:00 采纳率: 100%
浏览 49
已结题

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>
            </>

        )
    }
}

```

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2021-09-15 22:02
    关注

    测试题主代码没问题，至于背景色用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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 9月23日
  • 已采纳回答 9月15日
  • 创建了问题 9月15日

悬赏问题

  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差（基于双目相机）
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统