通过单击按钮打开抽屉时禁用文本框

时间:2019-01-17 00:29:48

标签: javascript html reactjs redux material-ui

更新1:我进一步删除了所有不必要的文件,你们能帮我https://codesandbox.io/s/0pk0z5prqn

  • 我正在尝试禁用文本框。
  • 当我单击“高级运动搜索”按钮时,一个抽屉打开,试图显示一个文本框。
  • toggleDrawer方法和
  • 但是问题是我没有在sports-advanced-search.js文件中得到状态,这就是我禁用文本框的位置。
  • 我通过放置控制台进行调试,但仍然无法帮助我'console.log(“ this.state --->”,this.state);'
  • 您能告诉我如何修复它,以便将来我自己修复它。
  • 在下面提供我的沙盒和代码段。

https://codesandbox.io/s/q8o66x572w

tab-demo.js

constructor(props) {
    super(props);
    this.state = {
      value: 0,
      top: false,
      left: false,
      bottom: false,
      right: false,
      disabled: false
    };
  }
  toggleDrawer = (side, open) => () => {
    this.setState({
      [side]: open
    });
    this.setState({ disabled: !this.state.disabled });
  };



   <Button onClick={this.toggleDrawer("right", true)}>
                  Advanced Sports Search
                </Button>

sports-advanced-search.js

 render() {
    const { classes } = this.props;
    const { value } = this.state;
    console.log("this.state--->", this.state);

                <input
              name="firstname"
              type="text"
              disabled={this.state.disabled ? "disabled" : ""}
            />

1 个答案:

答案 0 :(得分:2)

您不需要将“ disabled”作为字符串传递。禁用HTML的属性为boolean。因此,仅b就足够了。