Question

我有一组组件，并添加和删除按钮。

当收藏太小太大时，我想隐藏/灰显这些按钮。

从here获取的这段代码似乎可以完成这项工作：

render() {
    return (
        { this.props.isGreaterThanOne && (
            <div>
                this only shows up if the checkboxField Field is checked
            </div>
        ) }
    );
}

我可以简单地在增量和减量函数中更新一个布尔值，如下所示：

let isGreaterThanOne = true;
this.setState({
    collection: this.state.collection.splice(this.state.collection, this.state.collection.length - 1),
});
if (this.state.collection.length > 1) {
    isGreaterThanOne = true;
} else {
    isGreaterThanOne = false;
}

    return { isGreaterThanOne };

现在我很熟悉上面的内容可能就像垃圾一样。欢迎所有建议。我认为这个变量应该在全球范围内打算，但我不知道如何去做。

基本上我只想要一个变量，只要删除行应该隐藏（只剩下一行），设置为false，当有两行或更多行时，设置为true。

当集合达到15或其他时，与另一个变量traking相同。

现在，即使我只是将isGreaterThanOne声明为等于true的全局const，div也不会显示。

根据@Denialos的要求，这是我的全部内容（以及他的建议）：

/* ************************************* */
/* ********       IMPORTS       ******** */
/* ************************************* */
import React, { Component } from 'react';
import UUID from 'node-uuid';
import { Card, CardBlock, Button, InputGroup, Input } from 'reactstrap';
import ProviderInfos from '../ProviderInfos/ProviderInfos';

/* ************************************* */
/* ********      VARIABLES      ******** */
/* ************************************* */

/* ************************************* */
/* ********      COMPONENT      ******** */
/* ************************************* */
export default class PretzelStandComponent extends Component {

    constructor(props) {
        super(props);
        this.state = { 
            inputPretzel: [],
            isGreaterThanOne: true
            };
        this.incrementPretzel = this.incrementPretzel.bind(this);
        this.decrementPretzel = this.decrementPretzel.bind(this);
    }

    componentDidMount() {
        this.incrementPretzel();
    }

    incrementPretzel() {
        const uuid = require('uuid/v1');
        uuid();
        const inputPretzel = this.state.inputPretzel;
        if (this.state.inputPretzel.length > 1) {
            this.state.isGreaterThanOne = true;
        } else {
            this.state.isGreaterThanOne = false;
        }
        this.setState({
            inputPretzel: inputPretzel.concat(<InputGroup>
                <Input placeholder="Pretzel" key={uuid} /><ProviderInfos /></InputGroup>),
        });
    }

    decrementPretzel() {
        if (this.state.inputPretzel.length > 1) {
            this.state.isGreaterThanOne = true;
        } else {
            this.state.isGreaterThanOne = false;
        }
        this.setState({
            inputPretzel: this.state.inputPretzel.splice(this.state.inputPretzel, this.state.inputPretzel.length - 1),
        });
    }

    render() {
        return (
            <Card>
                <CardBlock className="main-table">
                    <fieldset>
                        <legend>Pretzels</legend>
                        {this.state.inputPretzel}
                        <button onClick={this.incrementPretzel}>Ajouter un Pretzel</button>
                        { this.props.isGreaterThanOne && (
                           <div>
                               <button onClick={this.decrementPretzel}>Enlever un Pretzel</button>
                           </div>
                         ) }
                    </fieldset>
                    <Button color="secondary">Options</Button>{' '}
                    <Button id="btn">Exécuter</Button>
                </CardBlock>
            </Card>
        );
    }
}

Answer 1

这里的问题是你试图改变组件中的道具。如前所述，永远不要改变你的状态或以这种方式支持。

这是您问题的可能解决方案：

render() {
const { inputPretzel } = this.state;
const isGreaterThanOne  = inputPretzel && inputPretzel.length > 0;
return (
    <Card>
        <CardBlock className="main-table">
            <fieldset>
                <legend>Pretzels</legend>
                {inputPretzel}
                <button onClick={this.incrementPretzel}>Ajouter un Pretzel</button>
                {isGreaterThanOne  && (
                    <div>
                        <button onClick={this.decrementPretzel}>Enlever un Pretzel</button>
                    </div>
                ) }
            </fieldset>
            <Button color="secondary">Options</Button>{' '}
            <Button id="btn">Exécuter</Button>
        </CardBlock>
    </Card>
);

}

Answer 2

不要直接改变状态，你应该调用setState。

不要直接改变this.state，因为之后调用setState（）可能   替换你所做的突变。把它当作状态对待   不可变的。

setState（）不会立即改变this.state但会创建一个   待定状态转换。调用后访问this.state   方法可以返回现有值。

无法保证对setState的调用同步操作   并且可以批量调用以获得性能提升。 setState（）会   除非条件渲染逻辑是，否则总是触发重新渲染   在shouldComponentUpdate（）中实现。

如果正在使用可变对象且无法实现逻辑   在shouldComponentUpdate（）中，仅在新状态时调用setState（）   与以前的状态不同，将避免不必要的重新渲染。

字体：What the difference of this.state and this.setstate in ReactJS?

您的问题的可能解决方案，使用immutability-helper：

import update from 'immutability-helper';
.....
.....
    incrementPretzel() {
        const uuid = require('uuid/v1');
        uuid();
        const inputPretzel = this.state.inputPretzel;
        if (this.state.inputPretzel.length > 1) {
            this.setState({ isGreaterThanOne: true });
         else {
            this.setState({ isGreaterThanOne: false });
        }
        this.setState({
            inputPretzel: inputPretzel.concat(<InputGroup>
                <Input placeholder="Pretzel" key={uuid} /><ProviderInfos /></InputGroup>),
        });
    }
decrementPretzel() {
    const inputPretzel = this.state.inputPretzel;
    if (this.state.inputPretzel.length > 1) {
       this.setState({ isGreaterThanOne: true });
    } else {
        this.setState({ isGreaterThanOne: false });
    }
  this.setState((prevState) => ({
    data: update(prevState.data, {$splice: [[-1, 1]]})
  })
}

render() {
        return (
            <Card>
                <CardBlock className="main-table">
                    <fieldset>
                        <legend>Pretzels</legend>
                        <button onClick={() => this.incrementPretzel}>Ajouter un Pretzel</button>
                        { this.state.isGreaterThanOne && 
                           <div>
                               <button onClick={() => this.decrementPretzel}>Enlever un Pretzel</button>
                           </div>
                         }
                    </fieldset>
                    <Button color="secondary">Options</Button>
                    <Button id="btn">Exécuter</Button>
                </CardBlock>
            </Card>
        );
    }

ReactJs：如何设置简单的条件可见隐藏规则？

2 个答案: