Question

我正在尝试在使用表单时包含选择标记。但是下拉列表没有得到渲染。问题是，选择的下拉菜单甚至没有出现在屏幕上。这也发生在收音机盒上。浏览器中唯一出现的是两个输入字段，然后是select标签的标签。之后没有下拉菜单这是我的代码 -

       import React, { Component } from "react";
       import { Link } from "react-router-dom";
       import { withRouter } from "react-router-dom";
       import { connect } from "react-redux";

       class UpdateBillForm extends Component {
       constructor(props) {
       super(props);

       this.state = {
       billername: this.props.bill.billername,
       userid: this.props.bill.userid,
       value: "sid"
        };
         this.onbillerNameUpdate = this.onbillerNameUpdate.bind(this);
         this.onbillerDescriptionUpdate = 
         this.onbillerDescriptionUpdate.bind(this);
         this.handleChange = this.handleChange.bind(this);
          } 

        onSubmit(e) {
        e.preventDefault;
        this.props.onSubmit({
        billerName: this.state.billerName,
        billerDescription: this.state.billerDescription
                   });
           this.props.history.push("/viewbiller");
               }
        onbillerNameUpdate(target) {
           this.setState(() => ({ billername: target }));
               }
        onbillerDescriptionUpdate(target) {
           this.setState(() => ({ billerDescription: target }));
             }
             handleChange(event) {
           this.setState({ value: event.target.value });
                }
        render() {
             return (
             <div>
             <form onSubmit={e => this.onSubmit(e)}>
             <label htmlFor="billerName">BillerName</label>{" "}
             <input
        type="text"
        value={this.state.billername}
        onChange={e => this.onbillerNameUpdate(e.target.value)}
      />
      <label htmlFor="billerDescription">BillerDescription</label>{" "}
      <input
        type="text"
        value={this.state.billerDescription}
        onChange={e => {
          this.onbillerDescriptionUpdate(e.target.value);
        }}
      />
      <label>
        Name
        <select value={this.state.value} onChange={e=>this.handleChange(e)}>
          <option value="sid">Sid</option>
          <option value="jam">jam</option>
        </select>
      </label>
      <br />
      <br />
      <button className="btn-flat white-text teal">Update</button>
      <Link className="btn-flat white-text right red" to="/viewbiller">
        Cancel
      </Link>
       </form>
          </div>
            );
             }
            }
         export default withRouter(connect()(UpdateBillForm));

Answer 1

如果您正在使用materializecss，它似乎会覆盖默认行为，因此除非您使用Materialize代码进行初始化，否则它根本不会显示。

https://materializecss.com/select.html

如果您没有动态呈现选择元素，则可以使用M.AutoInit()一次初始化所有内容。

https://materializecss.com/auto-init.html

最后，如果您不希望进行初始化工作，又不想介意外观稍微好一些（可用于移动体验吗？），可以将className="browser-default"添加到您的选择元素中并且避免了这个问题。

选择标签不起作用

1 个答案: