Установить максимальное удаление поля Redux-Form из Index - проверка поля - PullRequest
Новая
       5

Установить максимальное удаление поля Redux-Form из Index - проверка поля

0 голосов
/ 27 ноября 2018

https://codesandbox.io/s/zoojymzyp

В моем примере выше есть возможность сдвигать и удалять поля, чтобы обновить json для отправки.Форма предварительно заполняет поля, которые могут быть перезаписаны или удалены.Тем не менее, я хочу, чтобы оставалось как минимум 1 поле - например, вы не можете удалить все поля, должно быть хотя бы одно поле - в минуту я могу удалить все, пока не будет никаких входных данных. 

class renderForm extends React.Component {
    render() {
        let {
            fields,
            label
        } = this.props;
        const removeName = (index) => {
            fields = fields.remove(index);
        }
        return ( <
            div >
            <
            div variant = "fab"
            color = "primary"
            className = "jr-fab-btn"
            aria - label = "add"
            onClick = {
                () => fields.push()
            } >
            ADD <
            /div>

            {
                fields.map((newIntel, index) => {
                    console.log("newIntel", newIntel, index);
                    return ( <
                        div >
                        <
                        Field name = {
                            newIntel
                        }
                        key = {
                            index
                        }
                        label = {
                            label
                        }
                        placeholder = {
                            label
                        }
                        component = {
                            renderTextArea
                        }
                        /> <
                        p variant = "fab"
                        color = "primary"
                        style = {
                            {
                                'cursor': 'pointer'
                            }
                        }
                        className = "jr-fab-btn"
                        aria - label = "add"
                        onClick = {
                            () => removeName(index)
                        } >
                        REMOVE <
                        /p> <
                        /div>
                    );
                })
            } <
            /div>
        )
    }
}

Ответы [ 2 ]

0 голосов
/ 27 ноября 2018

Вдохновленный @ just-code ответом в комментариях: 

  const removeName = (index) => {
    {fields.length === 1 ? null : fields = fields.remove(index)}
  }

Это было именно то, что мне было нужно.Спасибо

0 голосов
/ 27 ноября 2018

Это надуманный пример, который показывает один из способов сделать это.

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = {
    items: []
  };

  addItem = () => {
    const { items } = this.state;
    items.push("item");
    this.setState({ items });
  };

  removeItem = () => {
    const { items } = this.state;
    if (items.length > 1) {
      items.pop("item");
    }

    this.setState({ items });
  };

  render() {
    return (
      <React.Fragment>
        <button onClick={this.addItem}>Add</button>
        <button onClick={this.removeItem}>Remove</button>
        <ul>
          {this.state.items.map(i => (
            <li>{i}</li>
          ))}
        </ul>
      </React.Fragment>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

По сути, вы можете изменить функцию удаления, чтобы ничего не делать, если остался только один элемент.Пример CodeSandbox здесь .

...