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

        )
    }
}

答

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

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

答

buttonOnClick方法里面传按钮ID参数，函数内部进行判断。

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

相关推荐