如何垂直渲染数组

Question

我正在尝试垂直渲染数组

这是到目前为止显示的方式

但我需要这样的

Travel

Heart

Earth

Blackjack

依旧......

这是代码

let textareaStyle = {
  width: '100%'
}, people = [
    'Hello',
    'Travel',
    'Heart',
    'Earth',
    'Hills',
    'Blackjack',
    'Casino',
    'Alberto',
    'Marcelo',
    'Jorge'
  ], displayResult;

class Login extends Component {

  constructor() {
    super();
    this.state = {value : '', result: ''};
  } 

  render () {
    return (
         <input type="text" onChange={this._onChange.bind(this)} style={textareaStyle}
                     onKeyUp={this._changeInput.bind(this)} value={this.state.value} />
         <p>{this.state.result}</p>
    );
  }

  _matchPeople = (input) => {
    let reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
    return people.filter(function(person) {
      if (person.match(reg)) {
        return person;
      }
    });
  }

  _changeInput = (val) => {
    let autoCompleteResult = this._matchPeople(this.state.value);
    this.setState({result: autoCompleteResult.join(', ')});
  }

  _onChange = (event) => {
    this.setState({value: event.target.value});
  }  

}


export default Login;

所以我在这里显示结果

<p>{this.state.result}</p>

我需要在垂直方向上显示它，例如下拉列表

Answer 1

函数matchPeople返回一个数组。

然后，您将该数组设置为innerHTML的{​​{1}}。

但是，#result需要一个字符串，因此它使用innerHTML方法将数组转换为字符串。该方法使用逗号分隔符连接数组中的项目。

相反，您可以尝试使用toString元素作为分隔符连接数组，这会在结果之间产生换行符。

<br />

或者，由于您只处理文字，因此我建议避免使用result.innerHTML = autoCompleteResult.join('<br />'); 并使用innerHTML，而使用换行符作为分隔符。

textContent

注意默认情况下，换行符会折叠为普通空格。要防止它，请使用white-space：

result.textContent = autoCompleteResult.join('\n');

Answer 2

filter不是每个元素的变异者; map方法是合适的：

＆＃13;

＆＃13;

var people = ['Steven', 'Sean', 'Stefan', 'Sam', 'Nathan'];

function matchPeople(input) {
  var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
    
  return people.map(function(person) {
    if (person.match(reg)) {
       return '<br>' + person;
    };
  });
}

function changeInput(val) {
  var autoCompleteResult = matchPeople(val);
  document.getElementById("result").innerHTML = autoCompleteResult;
}

＆＃13;

<input type="text" onkeyup="changeInput(this.value)">

<div id="result">
</div>

＆＃13;

＆＃13;

＆＃13;