Question

我使用jquery制作todo应用程序，现在使用反应制作相同的应用程序。我使用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 text中。列表附加了复选框，＆＃39; text＆＃39;和一个按钮。我希望在react中编写相同的代码，这样当我点击按钮时，会附加以下列表。

Answer 1

使用state存储新值。将其另存为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将拥有最新的用户输入列表。

<强> [UPDATE]

检查示例https://jsfiddle.net/Pranesh456/1veb7bdg/1/

Answer 2

jQuery与React根本不同......您需要考虑如何在state中存储数据...而不是实际的DOM元素（类似jQuery）。您需要在render方法中定义DOM元素，并让它遍历您的state以生成元素。

我制作了这个回购来帮助教育开发人员从jQuery过渡到React ..结帐可能会有所帮助：https://github.com/bradbumbalough/react-tunes。

如果您是React的新手，我也非常推荐这个文档：Thinking in React。

使用React.js附加值

2 个答案: