ReactJS 更新组件并将数组作为参数传递？

Question

我是 ReactJS 的新手，我发现我缺少一些基本信息。

我正在处理简单的 TODO 列表，您在其中单击 <li>，它就会转移到“完成”部分。 http://jsbin.com/gadavifayo/1/edit?html,js,output

我有 2 个包含任务列表的数组，当您单击一个任务 <li> 时，它会从数组中删除并转移到其他数组。之后单击 <ul> 会更新，但不会更新任务所在的位置。

使用它时，您可能会注意到 <ul> 仅在单击时更新。如何在仅单击一个时同时更新 <ul>？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Testing</title>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div id="react-app"></div>
    <script src="https://fb.me/react-0.14.3.js"></script>
    <script src="https://fb.me/react-dom-0.14.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel">
  /*
 * Components
 */
  var pendingItems = [
    'Clean the room',
    'Get milf',
    'Sellout and stuff'
    ];

  var finishedItems = [
    'Clean the room',
    ];

var TodoList = React.createClass({
    getInitialState: function() {
        return { items: this.props.list };
    },
  handleClick: function(i) {
    console.log('You clicked: ' + i + ':' + this.props.listString);
    if (this.props.listString == "pendingItems") {
      var removed = this.state.items.splice(i, 1);
      finishedItems.push(removed);
    };
    if (this.props.listString == "finishedItems") {
      var removed = this.state.items.splice(i, 1);
      pendingItems.push(removed);
    };

    this.forceUpdate()
  },

  render: function() {
    return (
      <ul>
        {this.state.items.map(function(item, i) {
          return (
            <li onClick={this.handleClick.bind(this, i)} key={i}>{this.state.items[i]}</li>
          );
        }, this)}
      </ul>
    );
  },
});

var Layout = React.createClass({
  render: function (){
    return (
      <div className='col-xs-12'>
        <div className='col-xs-6'>
        <TodoList list={pendingItems} listString="pendingItems"/>
        </div>
        <div className='col-xs-6'>
        <TodoList list={finishedItems} listString="finishedItems"/>
        </div>
        <div className='col-xs-6'></div>
      </div>

      )
  }
});

ReactDOM.render(<Layout />, document.getElementById('react-app'));
</script>

</body>
</html>

Answer 1

您需要使用状态。在 getInitialState 中你放了你的两个列表，onclick 做你想要的任何转换（然后你有例如 updated_list1 和 updated_list2 然后你像这样设置列表：

this.setState({ list1: updated_list1, list2: updated_list2 });在你的情况下 this.setState({ pendingItems: pendingItems ... 在 .push

之后

setState函数会自动重新渲染，无需调用forceupdate

这里第二件重要的事情是你必须使两个列表通信有点，所以我的建议是将你的两个 ul 放在同一个组件中（这样你就可以以与上述相同的组件状态管理列表。

但这不是唯一的方法，您可以选择将两个列表的状态放在父组件（布局）中。在这种情况下你应该使用这种方式去。 https://facebook.github.io/react/tips/expose-component-functions.html

在任何情况下你都需要（如果你想保持简单并且没有像 backbone 或通量模式这样的外部模型管理）将列表状态放在相同的组件状态中。（提醒：方法 1 => ul 在同一个组件中，所以状态也是如此，方法 2 => 在父组件中保持状态）

ReactJS 更新组件并将数组作为参数传递？

ReactJS updating coomponents and passing array as argument?

components

view

reactjs