javascript - 在 React 中的按钮单击上添加和删除 HTML 元素

Question

什么是最好的简单 实现这个 jQuery 的方法 fiddle只使用 React 而不使用 jQuery 或任何其他库？我还没有完全掌握 ReactJS 技能，想知道是否有一种方法可以动态创建和删除元素。

我正在考虑创建一个

this.state = { "inputs": ["<input type="text" /><input type="checkbox" />"] }

添加时保存 HTML 的状态变量数组，根据索引为每个元素提供一个唯一键，然后 .map() 它，但不确定是否有更简单的方法来实现这一点，并且不确定如何删除每个元素.

希望得到任何帮助或反馈，谢谢!

Answer 1

这是执行此操作的“React”方式，我不是 React 专家，因此代码可能会更好，可以接受更正。

是的，react 有更多的样板代码，因为你不直接处理 DOM，而且“魔法”更少，这意味着你有更多的控制权。 (特别是作为受控组件)

状态应该尽可能少，你只需要保存纯数据，其他装饰性的东西让组件来处理它们。

视情况而定，您可能需要将 Row 分开将组件分成 2 个具有更多 Prop 的独立组件。

？？？更多建议？

更新:在过去 3 年每天使用 React 之后，我发现以前的代码有一些不好的做法，我已经更新了代码以使其更干净，希望它可以帮助你。

const Row = function(props){
  const {checked, value, onChange, onChecked} = props;
  return (
    <div>
      <input 
        type="checkbox" 
        checked={checked}
        onChange={onChecked}
        />
      <input type ="text" value={value}  onChange={onChange}/>
    </div>
  );
}

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      rows: [
        {value: 'row1', checked: false},
        {value: 'row2', checked: true},
        {value: 'row3', checked: false},
      ]
    };
  }
  
  updateValue = (e, idx) => {
    const rows = [...this.state.rows];  // copy array because we don't want to mutate the previous one
    rows[idx].value = e.target.value;
    this.setState({
        rows,
    });
  }
  
  onChecked = (idx) => {
    const rows = [...this.state.rows];  // copy array because we don't want to mutate the previous one
    rows[idx].checked = !rows[idx].checked;
    this.setState({
        rows,
    });
  } 
  
  addRow = () => {
    const rows = [...this.state.rows, 
                  {value:'', checked: false}
                 ];
    this.setState({
        rows,
    });
  }
  
  deleteRows = () => {
    this.setState({
      rows: this.state.rows.filter(e => !e.checked)
    });
  }
 
  render(){
    return(
      <div>
        {this.state.rows.map((row, idx) => {
          return(
              <Row 
                key={idx} 
                value={row.value}
                checked={row.checked}
                onChange={(e) => this.updateValue(e, idx)} 
                onChecked={() => this.onChecked(idx)}
                /> 
            )
        })
        }
        <button onClick={this.addRow}>
          add 
        </button>
        <button onClick={this.deleteRows}>
          delete
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.development.js"></script>

<div id="app"> </div>