Question

我是ReactJS的新手，我想知道如何呈现它：

我有一个带有3个过滤器的表单（下拉列表），但是这些下拉列表是通过数据库填充的。这就是我尝试过的：

import React, {Component} from 'react';
import axios from "axios";

export default class Filter extends Component {

    constructor(props) {
        super(props);
        this.state = {rarity: [], typpeequipement: []};
    }

    componentDidMount() {
        axios.all([
            axios.get('api/rari'),
            axios.get('api/type'),
        ])
            .then(axios.spread((rar, type) => {
                this.setState({rarity: rar.data, type: type.data})
            }));
    }

    render() {
        return (
            <div className="carac" id="carac-principale">
                /* some dropdown */
                {this.state.rarity}
                /* some dropdown */
                {this.state.type}
            </div>
        );
    }

}

还有所有这三个过滤器的表单：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Filter from 'filter';
export default class SearchForm extends Component {
    render() {
        return (
            <div className="filter">
                <div className="tosearch">
                    {Filter.render()}
                </div>
            </div>
        );
    }

}

我不知道用数据填充下拉列表的好方法是什么。将要渲染的过滤器与要使用的表单分开是个好主意吗？

Answer 1

您无需显式调用render；一旦安装了组件，React就会为您完成。要在下拉菜单中显示数据，只需循环访问获取的数据并设置值/选项。

render() {
  return (
    <div className="carac" id="carac-principale">
      <select>
        {
          this.state.rarity.Map((rarity) => (
            <option value={rarity.id}>{ rarity.name }</option>
          ))
        }
      </select>
      <select>
        {
          this.state.type.map((type) => (
            <option value={type.id}>{ type.name }</option>
          ))
        }
      </select>
    </div>
  );
}

另外，如果要在模型/对象中设置下拉菜单的选定值，则需要为其设置value和onChange道具。

使用React对一些过滤器组件进行建模

1 个答案: