Добавление значения с помощью React.js

Я сделал приложение todo с помощью jquery и теперь с помощью react делает то же приложение. Я сделал общий макет приложения, используя react, но столкнувшись с проблемой в добавлении элемента, нажав кнопку. Код, который я сделал в jquery был.

    function entervalue()
    {
      var text = $('#inputext').val();
          $("#list").append('<li class="item"> <input type="checkbox" class="option-input checkbox"> ' + text + '<button class="destroy"></button><li>');
      $("#inputext").val('');
    } 

Здесь значение поля ввода сохраняется в тексте var.
Список добавляется в наличие флажка, «текст» и кнопки.
I want same code to be written in react, so that when i click on button the following list gets appended.

2 ответа

  1. Используется stateдля хранения нового значения. Сохраните его как an array. React выполняет рендеринг при изменении состояния. Во время этой визуализации, map()через значение в состоянии и генерировать HTML из него.

    this.setState({ //put this inside the 'onChange' handler of <input/>
     value: e.target.value
    })
    

    Это установит новое значение состояния.

    var todo = this.state.value.map(function(value){
     return <li class="item"> <input type="checkbox" class="option-input checkbox">{value}<button class="destroy"></button><li>
    })
    

    todo будет иметь последний список пользовательских входов.

    [ОБНОВЛЕНИЕ]

    Проверьте пример https://jsfiddle.net/Pranesh456/1veb7bdg/1/

  2. jQuery принципиально отличается от React… вам нужно подумать о том, как вы храните данные state.. не фактические DOMэлементы (jQuery like). Необходимо определить элементы DOM в renderметоде и выполнить итерацию stateдля создания элементов.

    Я сделал это репо, чтобы помочь обучить разработчика переходу от jQuery к React.. это может быть полезно для проверки: https://github.com/bradbumbalough/react-tunes .

    Я также настоятельно рекомендую этот документ, если вы новичок в React: Thinking in React .