使用搜索栏更新属性

时间:2017-08-10 10:45:20

标签: javascript reactjs

当字符串包含带有属性的子字符串时,我正在尝试动态呈现和更新视图。  我需要使用这样的JavaScript对象:var ObjectArray =[{"title:"Great Title"},{"title":"Interesting Title"},{"title":"Boring Title"}];

这是我发现的,但它使用反应类型的对象并仅渲染拟合匹配。

let contacts = [{
  id: 1,
  name: 'Sherlock',
  phone: '221 221 221'
}, {
  id: 2,
  name: 'Watson',
  phone: '332 333 331'
}]

class App extends React.Component {
  render() {
    return (
      <div>
        <h2>Contact List</h2>
        <br />
        <ContactList contacts={this.props.contacts} />
      </div>
    )
  }
}
class Contact extends React.Component {
  render() {
    return (
      <li>{this.props.contact.name} {this.props.contact.phone}</li>
    )
  }
}
class ContactList extends React.Component {
  constructor() {
    super();
    this.state = {
      search: ''
    };
  }
  updateSearch(event) {
    this.setState({
      search: event.target.value.substr(0, 10)
    });
  }
  render() {
    let filteredContacts = this.props.contacts.filter(
      (contact) => {
        return contact.name.toLowerCase().includes(this.state.search.toLowerCase());
      }
    );
    console.log(filteredContacts);
    return (
      <div>
        <input className="text" type="text" value={this.state.search} onChange={this.updateSearch.bind(this)} />
        <hr />
        <ul>
        {filteredContacts.map((contact) => {
          return <Contact contact={contact} key={contact.id} />
        })}
        </ul>
        </div>
    )
  }
}

ReactDOM.render(<App contacts={contacts} />, document.getElementById('container'));

ReactDOM.render(
  <FilterableProductTable products={PRODUCTS} />,
   document.getElementById('root')
);
<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>
<body>
  <div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

我尝试更改此代码,但它使用了所有未更新的静态解决方案。

这是我的一个概念:

var ObjectArray =[{"title":"Great Title"},{"title":"Interesting Title"},{"title":"Boring Title"}];
var BoolArray = Array(ObjectArray.length).fill(false);
class App extends React.Component {

 constructor() {
    super();
    this.state = {
      search: ''
    };
  }
  updateSearch(event) {
    this.setState({
      search: event.target.value.substr(0, 10)
    });
  }
  render() {
      return(
      <input className="text" type="text" value={this.state.search} onChange={this.updateSearch.bind(this)} />
      )
      {ObjectArray.map((obj, index) => {
        return(
          <h1 className={BoolArray[index] ? 'red' : 'blue'}>{obj.title}</h1>
        )
      }
    )
  }
}
ReactDOM.render(
  <App/>
   document.getElementById('root')
);
.red{
  color : red;
}
.blue{
  color: blue
}
<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="root">

1 个答案:

答案 0 :(得分:0)

yes应该是一个对象图,但未定义,这将导致问题。

 return(
  <input className="text" type="text" value={this.state.search} onChange={this.updateSearch.bind(this)} />
  )

那么,你返回那个表达式,然后继续下面呢?这是死代码,因为函数已退出。

react只能当前返回1个根级别元素。如果你需要返回更多,你必须包装成一个元素。

所以

render(){
  return <div>
    <input ... />
    {something.map(el => <h1>{el.title}</h1>)}
  </div>
}