我认为它不是添加/删除输入字段，而是管理表单状态以保持必要的元素可见性。

只要您要访问在这些输入字段中选择的值（例如在表单提交时），而不是使用布尔标志，您可能需要将动态表单行存储在您的状态中作为以下结构的数组：

[
   {rowId:..., selectedOptions:{relation:..., concept...}},
   ...
]

为简单起见，我还将您的动态表单行重新设计为一个单独的组件。

有了这个，我将onClick()行组件中添加/删除按钮的事件处理程序附加到父表单组件的回调中，该回调将在其状态中附加/删除数组项，从而使相应的行组件出现/消失。

您可以查询以下实时片段以完整演示该概念：

const { useState } = React,
      { render } = ReactDOM
      
const relations = ['relation1', 'relation2', 'relation3'],
      concepts = ['concept1', 'concept2', 'concept3']

const FormRow = ({rowId, selectedOptions, onSelect, onAdd, onRemove}) => {
  const handleChange = e => onSelect(rowId, e.target.getAttribute('param'), e.target.value)
  return (
    <div>
      <label>Relation:
        <select param="relation" onChange={handleChange} value={selectedOptions.relation||''}>
          <option value="" disabled>select relation</option>
          {
            relations.map((rel,key) => <option {...{key}} value={rel}>{rel}</option>)
          }
        </select>
      </label>
      <label>With Concept:        
        <select param="concept" onChange={handleChange} value={selectedOptions.concept||''}>
          <option value="" disabled>select concept</option>
          {
            concepts.map((con,key) => <option {...{key}} value={con}>{con}</option>)
          }
        </select>
      </label>
      <button type="button" onClick={onAdd}>+</button>
      <button type="button" onClick={() => onRemove(rowId)}>-</button>
    </div>
  )
}

const Form = () => {
  const [rows, setRows] = useState([{rowId:0, selectedOptions:{}}]),
        onAddRow = () => {
          const maxRowId = Math.max(...rows.map(({rowId}) => rowId))
          setRows([...rows, {rowId: maxRowId+1, selectedOptions:{}}])
        },
        onRemoveRow = id => setRows(rows.filter(({rowId}) => rowId != id)),
        onSelectRow = (id, param, val) => {        
          const rowsCopy = [...rows],
                item = rowsCopy.find(({rowId}) => rowId == id)
                Object.assign(item, {selectedOptions:{...item.selectedOptions, [param]:val}})
          setRows(rowsCopy)
        }
  return (
    <form onSubmit={e => (e.preventDefault(), console.log(rows))}>
      {
        rows.map(({rowId, selectedOptions}, key) => (
          <FormRow 
            {...{key, rowId, selectedOptions}}
            onAdd={onAddRow}
            onRemove={onRemoveRow}
            onSelect={onSelectRow}
          />
        ))
      }
    <input type="submit" value="Submit" />
    </form>
  )
}

render (
  <Form />,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

您需要一个包含要呈现的项目的列表。当用户单击加号按钮时，您需要添加一个新元素。

例子：

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { items: [{}], relationList: [], conceptList: [] };
    }
    addItem = () => {
        var { items } = this.state;
        items.push({});
        this.setState({ items });
    }

    removeItem = (index) => {
        var { items } = this.state;
        items.splice(index, 1);
        this.setState({ items });
    }

    render() {
        var { items, conceptList, relationList } = this.state;
        return (
            <div>
                {items.map((rowItem, k) => (
                    <div key={k} className="form-row">
                        <div className="form-group col-md-5">
                            <label htmlFor={`cRelation${k}`}>Relation</label>
                            <select name={`cRelation${k}`} defaultValue={''} id={`cRelation${k}`} className="form-control">
                                <option disabled value=''> select relation</option>
                                {relationList.map(item => (
                                    <option key={item} value={item}>{item}</option>
                                )
                                )}
                            </select>
                        </div>
                        <div className="form-group col-md-6">
                            <label htmlFor={`withConcept${k}`}>withConcept</label>
                            <select name={`withConcept${k}`} defaultValue={''} id={`withConcept${k}`} className="form-control">
                                <option value='' disabled> select concept</option>
                                {(conceptList || []).map(item => (
                                    <option key={item.conceptId} value={item.conceptId}>{item.conceptName}</option>
                                ))}
                            </select>
                        </div>
                        <div className="form=group align-self-sm-center mt-2">
                            <button onClick={this.addItem} type="button" className="btn btn-sm btn-outline-success m-2">+</button>
                            <button onClick={() => this.removeItem(k)} type="button" className="btn btn-sm btn-outline-danger pr-2">-</button>
                        </div>
                    </div>
                ))}
            </div>
        );
    }
}

而不是 Boolean ，使用一个整数来表示如下所示的行数。加处理程序将增加计数。

this.state = {
                i: 1
            }

加处理程序

plus = (e) => {
            this.setState({
                i: this.state.i + 1
            });
        }

渲染功能：

 rowfunction() {
        return (<div className="form-row">
            <div className="form-group col-md-5">
                <label htmlFor="cRelation">Relation</label>
                <select name="cRelation" defaultValue={''} id="cRelation" className="form-control">
                    <option disabled value=''> select relation</option>

                </select>
            </div>
            <div className="form-group col-md-6">
                <label htmlFor="withConcept">withConcept</label>
                <select name="withConcept" defaultValue={''} id="withConcept" className="form-control">
                    <option value='' disabled> select concept</option>


                </select>

            </div>
            <div className="form=group align-self-sm-center mt-2">
                <button type="button" className="btn btn-sm btn-outline-success m-2 " onClick={this.plus}>+</button>
                <button type="button" className="btn btn-sm btn-outline-danger pr-2">-</button>
            </div>
        </div>)
    }
    render() {
        var rows = [];
        for (let index = 0; index < this.state.i; index++) {
            rows.push(this.rowfunction())
        }
        return rows;

    }