在按钮上添加和删除HTML元素单击React

时间:2016-11-19 09:04:40

标签: javascript reactjs

使用React而不使用jQuery或任何其他库,实现此jQuery fiddle的最佳简单方式是什么?我还没有完全具备ReactJS技能,并且想知道是否有办法动态创建和删除元素。

我在想创建一个

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

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

非常喜欢任何帮助或反馈,谢谢!

3 个答案:

答案 0 :(得分:8)

这是一种“React”方式,我不是React专家,所以代码可能更好,会接受更正。

  • 是的,react有更多的样板代码,因为你不直接处理DOM而且“魔法”更少,这意味着你有更多的控制权。
  • 状态应该尽可能地最小,你只需要保存纯数据,其他装饰性东西让组件来处理它们。
  • 取决于具体情况,您可能希望将Row组件分成两个具有更多道具的独立组件。
  • ???更多建议?

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;
    rows[idx].value = e.target.value;
    this.setState({
        rows,
    });
  }
  
  onChecked(idx){
    const rows = this.state.rows;
    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, i) => !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/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

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

答案 1 :(得分:1)

只需使用旧的普通JS方式

 var elem = document.getElementById("button_" + id);
 elem.parentNode.removeChild(elem);

答案 2 :(得分:0)

在我看来,将要创建的元素保存在变量中。每次你想创建一个元素 push() 到一个数组中,然后通过数组映射它来渲染它,如果你想删除你可以使用 pop() 删除数组中的最后一项。

注意:当元素是一个字符串时,你必须使用危险的SetInnerHTML来渲染它。

快乐编码!