Question

我是reactJS新手，我正在练习创建一个简单的例子，预期结果是，每个输入值（由空格分隔）插入HTML元素（<h1>）。它执行的是每个输出值在被空格分隔时消失。最好将以下代码复制粘贴到您自己的项目中，以便准确理解我的意思。

import React from 'react';

class Items extends React.Component {
  constructor() {
    super();
    this.state = {
      result: ''
    }

    this.showItems = this.showItems.bind(this);
  }

  render() {
    let results = this.state.result,
        resultItem = [];

    for(var i=0; i<results.length; i++) {
      resultItem = results[i];
    }

    return(
      <div>

        /* Example, the user typed "Item1 Item2 Item3" */
        <input type='text' placeholder='Enter items' onChange={this.showItems} />

        <div className='result'>
          <h1>{resultItem}</h1>
          /*
            Here, the displayed result should be:

            <h1>Item1</h1>
            <h1>Item2</h1>
            <h1>Item3</h1>
          */
        </div>

      </div>
    );
  }

  itemsResult(result) {
    this.setState({result});
  }

  showItems(e) {
    const items = e.target.value.split(' ');
    this.itemsResult(items);
  }
}

export default Items;

我该如何解决这个问题？

Answer 1

您的错误是，循环中您将最后一个值分配给resultItem。您需要使用数组push()方法将数据推送到resultItem。其他一切似乎都很好。更好的方法是使用.map()代替for loop

resultItem = [];

for(var i=0; i<results.length; i++) {
   resultItem = results[i];//You are assigning resultItem only last value
}

应该是：

resultItem = [];

for(var i=0; i<results.length; i++) {

 resultItem.push(<h1 key={i}>{results[i]}</h1>);
}

使用 .map（）方法：

   <div className='result'>
      {this.state.result.length>0 && this.state.result.map(function(item , index){
       return <h1 key={index}>{item}</h1>
      })}

Answer 2

您需要在按space

拆分后映射您创建的数组

＆＃13;

class Items extends React.Component {
  constructor() {
    super();
    this.state = {
      result: []
    }

    this.showItems = this.showItems.bind(this);
  }

  render() {
   
    return(
      <div>

        
        <input type='text' placeholder='Enter items' onChange={this.showItems} />

        <div className='result'>
          {this.state.result.length > 0 && this.state.result.map(function(item , index){
           return <h1 key={index}>{item}</h1>
          })}
          
        </div>

      </div>
    );
  }

  itemsResult (result) {
  console.log(result)
    this.setState({result});
  }

  showItems(e) {
    const items = e.target.value.split(' ');
    this.itemsResult(items);
  }
}

ReactDOM.render(<Items/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

Answer 3

问题在于你的for循环。它应该是：

for(var i=0; i<results.length; i++) {
      resultItem.push(results[i]);
    }

或者如果您想为每个项目创建单独的标记，您可以执行以下操作：

const list = resultItems.map((item) => <p>{item}</p>)

注意：

可能是您可以创建一个listitems。你不应该有多个h1。此外，注释在渲染部分中不起作用。所以你应该删除它。

Answer 4

使用此：

＆＃13;

class Items extends React.Component {
      constructor() {
        super();
        this.state = {
          result: ''
        }
    
        this.showItems = this.showItems.bind(this);
      }

      showItems(e) {
         const items = e.target.value;
         this.setState({result: items});
      }
    
      renderValues(){
         let data = this.state.result;
         return data.split(' ').map((el, i) => <h1 key={i}>{el}</h1>)
      }
    
      render() {
    
        return(
          <div>
            <input type='text' placeholder='Enter items' onChange={this.showItems} />
    
            <div className='result'>

              {this.renderValues()}

            </div>
    
          </div>
        );
      }
    }

ReactDOM.render(<Items/>, document.getElementById('app'))

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

＆＃13;

Answer 5

代码中有两件事是有问题的。

您每次都在resultItem循环中重新分配for。参见：

resultItem = results[i];

for循环结束后，resultItem将只包含results的最后一个元素。

您直接在<h1>元素中呈现字符串数组。参见：

<h1>{resultItem}</h1>

React 可以了解如何处理数组，但它只会一个接一个地呈现项目。您应该在数组中包含h1标记。惯用法是使用Array#map：

// ...
{
  resultItem.map(str => <h1>str</h1>)
}
// ...

顺便说一下，你的resultItem变量看起来很无关紧要。只需渲染results，您基本上只是为resultItem复制它。

输入值是内联的，不是换行符

5 个答案: