小编Bok*_*oky的帖子

我正在尝试将以下代码发送到 React js 中的子组件：

{\n    carPhoto: "../../images/small-logo.jpg",\n    make: "Mercedes",\n    price: "\xe2\x82\xac20000",\n    desc: "Vivamus gravida magna massa in cursus mi"\n}\n

现在我试图将desc分成两行。\n我尝试使用\\n、\\r、\\r\\n

desc: "Vivamus gravida magna<br /> massa in cursus mi"\ndesc: "Vivamus gravida magna\\nmassa in cursus mi"\ndesc: "Vivamus gravida magna\\r\\nmassa in cursus mi"\n

但没有任何效果。有什么建议吗？

我在react js中有以下代码:

'use strict';

module.exports = {
    homePage: {
        sliderTitle: 'Creative portfolio',

        loginTitle: 'Do you already <b>have</b> an account?'

    },
    registrationPage: {
        foo: 'bar'
    }
};

当我尝试使用那些标签时

var EN = require('./en');
{EN.homePage.loginTitle}

但{EN.homePage.loginTitle}返回带有b标签的字符串.

如何将这个b标签应用于单词？

为什么这不起作用:

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

        this.state = {
            top : 0,
            responsiveImg : ""
        };
    }

    componentWillMount(){
        const bodyWidth = window.innerWidth;
        const responsiveSliderImg = "responsiveSliderImg";

        if((bodyWidth >= 415) && (bodyWidth < 473)){
            this.setState({responsiveImg: responsiveSliderImg});
            console.log("The state is : " + this.state.responsiveImg);
        }
    }
}

我正在尝试将类名添加到componentWillMount函数中的状态,但它不起作用.在控制台日志中我得到的状态是:,因此状态为空.

任何的想法？

我有下一个html结构：

<div class="offerButtons">
  <button type="reset" class="btnReset"><span> No </span></button>
  <input type="text" class="offerInput" />
  <button type="submit" class="btnSubmit"><span> Yes </span></button>
</div>

而我的CSS如下：

.offerButtons {
    display: table;
    width: 100%;
    background-color: yellow;
}

.btnReset, .btnSubmit {
  border: 1px solid red;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: table-cell;
  text-align: center;
  vertical-align: middle; 
}

.btnReset span, .btnSubmit span{
   color: red;
}

.offerInput {
  height: 31px;
  margin: 0 5px;
  display: table-cell;
}

btnReset和btnSubmit具有固定的宽度。我想要的是那两个按钮的宽度固定，而inout字段占据其余宽度。

我想得到类似的东西：

但是现在，有了这段代码，我得到了：

任何的想法？

这是jsfiddle

我有一个Django模型，如下所示：

class BodyHeight(models.Model):
    seats = models.ForeignKey(to=Seats)
    name = models.CharField(max_length=127, null=True, blank=True)
    key = models.CharField(max_length=100, null=True)
    data = models.TextField(null=True, blank=True)

    class Meta:
        verbose_name_plural = "Body heights"

    def __str__(self):
        return self.name

然后在data字段中存储json数据，如下所示：

{"url": "https://some_url=/BE?category=COMMERCIAL, "images": ["url_to_some_image"]}

我想仅在Django管理面板中显示该字段的网址。

我现在有：

class BodyHeightAdmin(admin.ModelAdmin):
    search_fields = ('name', )
    list_display = ('id', 'name', 'key', )
    list_display_links = ('id', 'name', 'key', )

admin.site.register(BodyHeight, BodyHeightAdmin)

那是没有数据字段。如果我data在list_display其中添加的字段显示的是整个json（丑陋的格式），但我只想要url。

任何想法如何做到这一点？

我试图在鼠标移动时在画布上画一个圆圈，但没有成功。我的代码如下：

var damages_canvas = document.getElementById('damages-area');
var ctx_damages = damages_canvas.getContext('2d');
var circle_rect = damages_canvas.getBoundingClientRect();
var circle_drag = false;
var circle_canvas_update = true;
var circles = [];
var markerColor = "#f00";

damages_canvas.addEventListener('mousedown', drawCircleMouseDown, false);
damages_canvas.addEventListener('mouseup', drawCircleMouseUp, false);
damages_canvas.addEventListener('mousemove', drawCircleMouseMove, false);

requestAnimationFrame(updateCircleCanvas);

function updateCircleCanvas(){
    if(circle_canvas_update){
        drawCircleCanvas();
        circle_canvas_update = false;
    }

    requestAnimationFrame(updateCircleCanvas);
}

function drawCircle(circle){
    var startX = circle.startX,
        endX = circle.endX,
        startY = circle.startY,
        endY = circle.endY;

    ctx_damages.clearRect(0,0,damages_canvas.width,damages_canvas.height);
    ctx_damages.beginPath();
    ctx_damages.moveTo(startX, startY + (endY-startY)/2);
    ctx_damages.bezierCurveTo(startX, startY, endX, startY, endX, startY + (endX-startY)/2);
    ctx_damages.bezierCurveTo(endX, endY, …

在我的settings.py我有以下代码：

LANGUAGE_CODE = \'en\' \nUSE_I18N = True    \nUSE_L10N = True\nUSE_DECIMAL_SEPARATOR = True\nDECIMAL_SEPARATOR = ","\nUSE_THOUSAND_SEPARATOR = True\nTHOUSAND_SEPARATOR = "."\n

在我的模板中，我使用的数字如下：

{% load humanize %}\n{% load i18n %}\n{% load l10n %}\n<div>{% trans "Price" %}: \xe2\x82\xac <b>{{ payment|floatformat:2|intcomma }}</b></div>\n

但数字仍然是18,300.00我希望它是18.300,00。

任何想法？

我在前端使用 React 和 Graphql，在后端使用 Django 和 Graphene。

我希望能够下载报告的 pdf 文件。我尝试使用突变来做到这一点，如下所示：

const [createPdf, {loading: createPdfLoading, error: createPdfError}] = useMutation(CREATE_PDF)
const handleCreatePDF = async (reportId) => {
        const res = await createPdf({variables: {reportId: parseInt(reportId) }})
        debugger;
    };

export const CREATE_PDF = gql`
    mutation ($reportId: Int!) {
        createPdf (reportId: $reportId){
            reportId
        }
    }
`;

在后端，我有这样的事情：

class CreatePDFFromReport(graphene.Mutation):
    report_id = graphene.Int()

    class Arguments:
        report_id = graphene.Int(required=True)

    def mutate(self, info, report_id):
        user = info.context.user

        if user.is_anonymous:
            raise GraphQLError("You are not logged in!")

        report …

如何使用 React js 创建简单的微调器？

假设我有这样的代码：

 let cars = [
      {id: 1, name: "Golf"},
      {id: 2, name: "Audi"},
      {id: 3, name: "Passat"},
      {id: 4, name: "Bmw"}
    ];

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

      this.state = {
        loading: true
      }
    }

    componentDidMount(){
        this.setState({loading: false})
    }

        render(){
        let content = this.state.loading ? <div>Loading</div> : cars.map((c, i) => <div key={i}>{c.name}</div>)

        return (
        <div>{content}</div>
      )
    }
}

React.render(<Test />, document.getElementById('container'));

我试图loading在汽车列表未加载时进行显示。

这是小提琴

任何想法？

我已经在React中注册了，我需要将文件上传到服务器。这些文件需要Base64编码。

对其进行编码的函数如下：

getBase64(file) {
        let document = "";
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            document = reader.result;
        };
        reader.onerror = function (error) {
            console.log('Error: ', error);
        };

        return document;
    }

而处理表单的下一步按钮的功能如下：

handleNextButtonClick(event){
    event.preventDefault();
    let data = {domainId: this.props.user[0].domainId, name: steps.stepThree, values: this.state.files};

    let idCard = this.state.files.filter(file => file.file_type === "ID_CARD")[0].values.file;
    let statuses = this.state.files.filter(file => file.file_type === "STATUTES")[0].values.file;
    let blankLetterHead = this.state.files.filter(file => file.file_type === "LETTER_HEAD")[0].values.file;
    let companyPhoto = this.state.files.filter(file => file.file_type === "COMPANY_PICTURE")[0].values.file;


    let …