Question

我是ReactJS的新手而且我失去了一些基本信息。

我正在处理简单的TODO列表，您点击＆lt; li ＆gt;它被转移到完成部分。 http://jsbin.com/gadavifayo/1/edit?html,js,output

当您点击一个任务时，我有2个包含任务列表的阵列＆lt; li ＆gt;它从数组中删除并传输到其他数组。之后点击了＆lt; ul ＆gt;已更新，但不是任务所在的那个。

使用时，您可能会注意到＆lt; ul ＆gt;仅在单击时更新。如何同时更新＆lt; ul ＆gt;只点击一个？

<!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

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

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

1 个答案: