Hướng dẫn how to remove html element in react js - cách xóa phần tử html trong js phản ứng

4

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Cách tốt nhất không phức tạp để đạt được fiddle jQuery này bằng cách sử dụng phản ứng mà không cần sử dụng jQuery hoặc bất kỳ thư viện nào khác? Tôi chưa hoàn toàn có các kỹ năng ReactJS, và đã tự hỏi liệu có cách nào để tạo và xóa các yếu tố một cách linh hoạt không.uncomplicated way to achieve this jQuery fiddle using just React without using jQuery or any other libraries? I don't quite have the ReactJS skills yet, and was wondering if there was a way to create and delete elements dynamically.

Tôi đã nghĩ đến việc tạo ra một

this.state = { "inputs": [""] }

Mảng biến trạng thái giữ HTML khi được thêm vào, cung cấp cho mỗi cái một khóa duy nhất dựa trên chỉ mục và sau đó .

Rất thích bất kỳ sự giúp đỡ hoặc phản hồi, cảm ơn!

Hỏi ngày 19 tháng 11 năm 2016 lúc 9:04Nov 19, 2016 at 9:04

Đây là một cách "phản ứng" để làm điều này, tôi không phải là một chuyên gia phản ứng, vì vậy mã có thể tốt hơn, sẽ chấp nhận sửa chữa.

• Có, React có nhiều mã nồi hơi hơn, vì bạn không xử lý trực tiếp DOM và có ít "ma thuật" hơn, điều đó có nghĩa là bạn có nhiều quyền kiểm soát hơn. (đặc biệt là thành phần được kiểm soát)
• Các quốc gia nên ở mức tối thiểu nhất có thể, bạn chỉ cần giữ dữ liệu thuần túy, các công cụ trang trí khác cho phép các thành phần để xử lý chúng.
• Phụ thuộc vào tình huống, bạn có thể muốn tách thành phần Row thành 2 thành phần riêng biệt với nhiều đạo cụ hơn.
• ??? Nhiều gợi ý hơn?

CẬP NHẬT: Sau khi làm việc với React hàng ngày trong 3 năm qua, tôi thấy có một số thực tiễn xấu trên mã trước đó, tôi đã cập nhật mã để trở nên sạch sẽ hơn hy vọng nó sẽ giúp bạn.

const Row = function(props){
  const {checked, value, onChange, onChecked} = props;
  return (
    

      
      
    
  );
}

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(
      

        {this.state.rows.map((row, idx) => {
          return(
               this.updateValue(e, idx)} 
                onChecked={() => this.onChecked(idx)}
                /> 
            )
        })
        }
        
          add 
        
        
          delete
        
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('app')
);

Đã trả lời ngày 19 tháng 11 năm 2016 lúc 10:01Nov 19, 2016 at 10:01

YichzyichzYichz

8.9159 Huy hiệu vàng51 Huy hiệu bạc91 Huy hiệu Đồng9 gold badges51 silver badges91 bronze badges

2

Chỉ cần sử dụng theo cách cũ của JS

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

Đã trả lời ngày 7 tháng 5 năm 2020 lúc 18:46May 7, 2020 at 18:46

6

Theo tôi, giữ cho yếu tố bạn muốn tạo trong một biến. Mỗi khi bạn muốn tạo phần tử đẩy () nó thành một mảng và sau đó ánh xạ nó qua mảng để hiển thị nó, nếu bạn muốn xóa, bạn có thể sử dụng pop () để xóa mục cuối cùng trong mảng.

LƯU Ý: Bạn phải sử dụng DangerouslySetInnerHTML để hiển thị phần tử khi nó là một chuỗi.

Mã hóa hạnh phúc!

Đã trả lời ngày 25 tháng 3 năm 2021 lúc 11:31Mar 25, 2021 at 11:31

Bạn có thể xóa phần tử HTML trong JavaScript không?

Làm thế nào để bạn loại bỏ một phần tử khỏi một phản ứng?

Làm thế nào thêm hoặc loại bỏ phần tử trong React JS?

Làm thế nào để bạn loại bỏ một đối tượng trong HTML?