Question

import React from 'react'
import PropTypes from 'prop-types'
import axios from 'axios';
import Select from 'react-select';
import { Link } from "react-router-dom";
import moment from "moment";

class orders extends React.Component {
  state= {
    orders: [],
    checked: false
  }

  componentWillMount() {
    this.loadOrders();
  }

  loadOrders() {
    axios({
      method: 'get',
      url: `http://localhost:4200/api/orders/getallorders`
      }).then(res => {
        this.setState({orders: res.data.orders})

    }).catch(err => console.log(err))
  }

  handleCheck(e){
   this.setState({
    checked: e.target.checked
   })
   }

  render () {
    return (
      <div className={'container'}>
        <div className={'row'} style={{marginTop: '16px'}}>
          <h4 className={'col m6'} style={{margin: '0', padding: '0'}}>Orders</h4>
          <div className={'col m6'}>
            <input id ="checkbox_id" type="checkbox" checked={this.state.checked} onChange={this.handleCheck}/>
          </div>

        </div>

        <div className={'row'}>
        {this.state.orders.map(order => {
            return (
              <div key={order._id}  className={'col m3 center teal lighten-5'} style={{padding: '0'}}>
                <div className={'card-content'} style={{padding: '16px'}}>
                <p>{order._id}</p>
                <p style={{marginTop: '4px'}}>{moment(order.date).format('MM/DD/YYYY')}</p>
                <p style={{marginTop: '4px'}}>{order.shippingstatus}</p>
                <Link to={{ pathname: '/admin/orders/vieworder', state: {order} }}> <button className={'btn'} style={{marginTop: '8px'}}>View Order</button> </Link>
                </div>
              </div>
            )
        })}
        </div>

      </div>
    )
  }
}

export default orders;

大家好，我使用的是React，我遇到了一个非常奇怪的问题，checkbox根本没有显示在浏览器中，我在网上进行了搜索，但是没有找到任何有帮助的答案，任何想法为什么它不显示以及如何解决？

我尝试添加和删除“ PreventDefaults”，但没有用。

Answer 1

原来是https://materializecss.com的错误，我应该像他们的文档https://materializecss.com/checkboxes.html一样添加<form action="#">

复选框未显示在反应中

1 个答案: