小编Bee*_*Nag的帖子

我目前正在尝试将验证添加到使用material-ui组件构建的表单.我有它的工作,但问题是,我目前正在进行的方式验证功能当前正在调用输入中的每个状态更改(即每个键入的字母).但是,我只希望在键入停止后进行验证.

鉴于我目前的代码:

class Form extends React.Component {

    state = {open: false, email: '', password: '', email_error_text: null, password_error_text: null, disabled: true};

    handleTouchTap() {
        this.setState({
            open: true,
        });
    }

    isDisabled() {
        let emailIsValid = false;
        let passwordIsValid = false;

        if (this.state.email === "") {
            this.setState({
                email_error_text: null
            });
        } else {
            if (validateEmail(this.state.email)) {
                emailIsValid = true
                this.setState({
                    email_error_text: null
                });
            } else {
                this.setState({
                    email_error_text: "Sorry, this is not a valid email"
                });
            }
        }

        if (this.state.password === "" || …

我有一个字符串值(例如"表1"),我需要用它来查找数组中的特定对象,如下所示:

[
 {
  lookups: [], 
  rows: [{data: {a: 1, b: 2}}, {data: {a: 3, b: 4}}], 
  title: "Table 1", 
  columns: [{name: "a"}, {name: "b"}]
 },
 {
  lookups: [],
  rows: [{data: {c: 5, d: 6}}, {data: {c: 7, d: 8}}],
  title: "Table 2",
  columns: [{name: "c"}, {name: "d"}]
 }
]

一旦找到该对象,我就需要从列键中取值并将它们显示在选择列表中.

我知道如何做第二部分,但它首先是我遇到麻烦的对象访问.我试图在React组件渲染中执行此操作.

任何有关这方面的帮助将不胜感激.

谢谢你的时间.

我目前正在构建一个呈现表格的应用程序，但在第一个实例中，唯一呈现的是列标题。我想知道的是，然后我将如何让用户选择添加没有数据的行，然后他们可以编辑该行以添加他们想要放入该行的单元格中的数据。标题是由具有动态输入量的表单生成的，因此理论上可能会有很多输入，并且添加的行也需要反映这一点。如果可能的话，我想尝试避免使用插件。

该应用程序是使用 React 构建的，目前我正在使用 Flux 架构。

快速给出示例的答案将非常感激！

谢谢你的时间

这是整个表格的呈现位置：

import React from 'react';
import TableHeader from './TableHeader.jsx';
import TableBody from './TableBody.jsx';

export default class Table extends React.Component {
    render() {
        return (
            <table className="table table-striped dali-table">
                <thead><TableHeader /></thead>
                <tbody><TableBody /></tbody>
            </table>
        );
    }
}

以下是呈现列标题的代码：

import React from 'react';
import AppStore from '../../stores/AppStore';

export default class TableHeader extends React.Component {

    addHeaders() {
        let headerArray = AppStore.getTable().columns;
        let headerList = headerArray.map((element, index) => {
            return (
                <th key={index} id={element.id} className="text-center">{element.name}</th>
            ); …

我有一个名为Cells的组件,它使用从flux存储中获取的数据进行渲染.我的问题是我想将这些数据渲染到特定的行,但由于我渲染行的方式(它们是动态的,所以你可以将它们添加到表中),我很难给出行标识符,单元格组件可以渲染成.我希望这是有道理的!

这是代码:

细胞成分:

import React from 'react';

export default class Cells extends React.Component {
    render() {
        return (
            <td>{this.props.value}</td>
        );
    }
}

表组件:

    import React from 'react';
    import TableHeader from './TableHeader.jsx';
    import Cells from './Cells.jsx';
    import RowForm from './RowForm.jsx';
    import {createRow} from '../../actions/DALIActions';
    import AppStore from '../../stores/AppStore';

    export default class Table extends React.Component {
        state = {rows: [], cellValues: [], isNew: false, isEditing: false};
        updateState = () => this.setState({cellValues: AppStore.getCellValues()});

        componentWillMount() {
            AppStore.addChangeListener(this.updateState);
        }

        handleAddRowClickEvent = () => {
            let …

我有一个Dockerfile目前使用以下内容的：

COPY ./compose/local/django/start.sh /start.sh
RUN sed -i 's/\r//' /start.sh
RUN chmod +x /start.sh

如您所见，它会复制文件，然后使其可执行。现在，我需要根据构建映像时提供的参数来更改此设置。我试过使用此：

RUN if [ "$arg" = "True" ]; then \
    COPY ./compose/local/django/new.sh /new.sh \
    RUN sed -i 's/\r//' /new.sh \
    RUN chmod +x /new.sh; else \
    COPY ./compose/local/django/start.sh /start.sh \
    RUN sed -i 's/\r//' /start.sh \
    RUN chmod +x /start.sh; fi

但这失败了，因为看来我无法在条件语句中运行COPY或RUN命令。它总是失败：

/bin/sh: 1: COPY: not found

要么

/bin/sh: 1: RUN: not found

因此，我认为最好的做法是创建一个单独的bash文件来进行复制，例如：

#!/usr/bin/env bash

if [ "${arg}" = "True" …

我需要能够更新表行中的值,然后在单元格中显示这些新值.我该怎么做呢？

这是我目前正在使用的代码:

主表组件

import React from 'react';
import TableWithDataHeader from './TableWithDataHeader.jsx';
import TableWithDataBody from './TableWithDataBody.jsx';
import TableWithDataRowForm from './TableWithDataRowForm.jsx';
import {updateRowHistory} from '../../actions/DALIActions';
import AppStore from '../../stores/AppStore';

export default class TableWithData extends React.Component {
    state = {rows: [], isEditing: false, input: null};
    updateState = () => {
        let rows = this.state.rows;
        rows.shift();
        rows.push({id: AppStore.getRowId(), cells: AppStore.getUpdatedCells()});
        this.setState({rows});
        console.log(rows);
    };

    componentDidMount() {
        let rows = this.state.rows;
        rows.push({id: AppStore.getRowId(), cells: AppStore.getCells().historycells});
        this.setState({rows});
        console.log(rows);
        AppStore.addChangeListener(this.updateState);
    }

    handleEdit = (row) => {
        this.setState({isEditing: true}); …

我有一个表格，我希望可以在其中单击一个单元格并为此切换一个输入，该输入允许您更改该单元格中的数据。目前我只是直接渲染输入，但理想情况下我不想要这个。我真正想要的是在单元格中显示当前数据，然后当您单击单元格时，它会成为输入并允许您编辑数据。

表组件：

import React from 'react';
import TableWithDataHeader from './TableWithDataHeader.jsx';
import Row from './Row.jsx';
import {createRowHistory} from '../../actions/DALIActions';
import TokenStore from '../../stores/TokenStore';
import TableDataStore from '../../stores/TableDataStore';

export default class Table extends React.Component {
    state = {data: TableDataStore.getCells().historycells};

    handleSubmitEvent = (e) => {
        e.preventDefault();
        console.log(this.state.data);
        let data = this.state.data;
        let dataEntriesArray = [];
        for (let key in data) {
            if (data.hasOwnProperty(key)) {
                dataEntriesArray.push({contents: data[key]});
            }
        }
        console.log(dataEntriesArray);

        let access_token = TokenStore.getToken();
        let row_id = TableDataStore.getRowId();

        createRowHistory(access_token, row_id, dataEntriesArray);

    };

    handleChangeEvent = …

我对材料相当新,我认为我的问题可能有一个简单的答案,但我只想得到一些反馈.我想要做的是渲染一个只包含列标题的表(从数据库中存储的数据填充).此时应该没有行.理想情况下,我希望有一个可点击的按钮,可以添加一行(与列标题具有相同数量的单元格),然后可以将这些数据输入并保存到数据库中.我假设我可以添加onCellClick属性,以便可以将数据输入到material-ui表的单元格中,但我最大的问题是生成行的最佳方法是什么？以前我只是通过将一个对象推入一个空数组来做类似的事情,但我想知道是否有更简洁的方法来做到这一点？特别是考虑到我决定使用React和Redux构建它的主要原因之一是试图避免做这样的事情!

无论如何,谢谢你的时间,如果你能告诉我一个更好的方式的例子,我可能会这样做,非常感谢!

我有两个数组:

[{Name: "Jack", Depot: "5"}, {Name: "Jill", Depot: "6"}]

和

[{Depot Name: "Edgware"}, {Depot Name: "Romford"}]

我需要从第二个数组中取出对象并将它们与第一个数组中的对象合并,以产生以下结果:

[{Name: "Jack", Depot: "5", Depot Name: "Edgware"}, {Name: "Jill", Depot: "6", Depot Name: "Romford"}]

任何有关这方面的帮助将非常感激