Question

我上面的示例可以推送和删除字段以更新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示例here。

Answer 2

受到@ just-codes答案的启发：

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

这正是我所需要的。谢谢

设置从索引最大移除Redux-Form字段-字段验证

2 个答案: