Terryzjh 2021-09-15 22:39 采纳率: 100%
浏览 119
已结题

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

按钮能多选，中间以“；” 间隔 ，谢谢

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

export class Inputt extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            textareaValue: "",
            white: '#6c1e3e'
        }

    }

    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 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="授权死循环">授权死循环</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 23:34
    关注

    多选？可以用下面的代码,有帮助麻烦点个采纳【本回答右上角】，谢谢~~

    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: [],//改为数组
        bgcolor:'#f00'
        }

    }

    render() {
        const buttonOnClick = (e) => {
        var state=this.state.textareaValue;
        var index=state.findIndex(i=>i==e.currentTarget.value);//找到点击按钮值的下标
        if(index==-1){//不存在压入数组
        state.push(e.currentTarget.value);
        }
        else{//存在则移除
        state.splice(index,1);
        }
            this.setState({
                textareaValue:state
            })
        }

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

        )
    }
}

ReactDOM.render(
            <Inputt/>,
            document.getElementById('content')
        );


    </script>
</head>
<body>
    <div id="content"></div>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

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

悬赏问题

  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料