設置從索引最大移除Redux-Form字段-字段驗證

Question

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>
        )
    }
}

Answer 1

這是一個人為的示例，顯示了執行此操作的一種方法。

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示例。

Answer 2

受到@ just-codes答案的啟發：

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

這正是我所需要的。 謝謝