Terryzjh 2021-09-23 19:03 采纳率: 100%
浏览 516
已结题

react怎么获取后端接口,并渲染。


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


export 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
              })
         }
         function renderButton(words,state){
            var btns=[];
            for(var v of words)btns.push(<Button style = {{background:state.textareaValue.find(i=>i==v)?state.bgcolor:''}} shape='round' onClick={(e) => buttonOnClick(e) }  value={v} key={v}>{v}</Button>)
            return btns;
         }
         var words=['过度授权','重复授权','授权死循环','应用截图与demo不一致','页面无法打开'];

         return (
              <div>
                    {renderButton(words,this.state)}
                    <hr></hr>
                    <textarea style={{width:500}} value={this.state.textareaValue.join(';')} onChange={(e) => textareaonChange(e)}></textarea>
              </div>

         )
    }
}

approval/getApprovalOpinionTag 这是GET请求,是Button标签( var words=['过度授权','重复授权','授权死循环','应用截图与demo不一致','页面无法打开'];)的

img


还需要什么,可以给我说下。万分感谢

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2021-09-23 21:01
    关注

    可以用reqwest模块加载接口数据后调用this.setState更新状态数据。或者直接用原生的fetch对象获取数据也行,fetch使用参考

    代码大概如下

    
    
        import { Button } from "antd";
        import React from "react";
    
        export class Inputt extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    textareaValue: [],//改为数组
                    bgcolor: '#f00',
                    words:[]//新增words属性,以便fetch更新
                }
            }
    
            componentDidMount() {//增加组件mount事件
                //fetch获取数据
                fetch('/approval/getApprovalOpinionTag').then(res => {
                    return res.json();
                }).then(data => {
                    console.log(data)
                    this.setState({ words: data.data })//更新
                });
            }
            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
                    })
                }
                function renderButton(words, state) {
                    var btns = [];
                    for (var v of words) btns.push(<Button style={{ background: state.textareaValue.find(i => i == v) ? state.bgcolor : '' }} shape='round' onClick={(e) => buttonOnClick(e)} value={v} key={v}>{v}</Button>)
                    return btns;
                }
                //var words = ['过度授权', '重复授权', '授权死循环', '应用截图与demo不一致', '页面无法打开'];//数据通过fetch从接口获取,看componentDidMount事件,下面的componentDidMount注意看修改过参数插入
                return (
                    <div>
                        {renderButton(this.state.words, this.state)}
                        <hr></hr>
                        <textarea style={{ width: 500 }} value={this.state.textareaValue.join(';')} onChange={(e) => textareaonChange(e)}></textarea>
                    </div>
                )
            }
        }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥15 BP神经网络控制倒立摆
  • ¥20 要这个数学建模编程的代码 并且能完整允许出来结果 完整的过程和数据的结果
  • ¥15 html5+css和javascript有人可以帮吗?图片要怎么插入代码里面啊
  • ¥30 Unity接入微信SDK 无法开启摄像头
  • ¥20 有偿 写代码 要用特定的软件anaconda 里的jvpyter 用python3写
  • ¥20 cad图纸,chx-3六轴码垛机器人
  • ¥15 移动摄像头专网需要解vlan
  • ¥20 access多表提取相同字段数据并合并
  • ¥20 基于MSP430f5529的MPU6050驱动,求出欧拉角
  • ¥20 Java-Oj-桌布的计算