Question

所以我有一个正常工作的react-modal，从那时起我一直在做的就是在应用程序中添加样式。

现在我调出模态的按钮不起作用。

我查看了问题所在的两个文件。

DecisionTreeApp.js：

import React from 'react';
import AddOption from './AddOption';
import Header from './Header';
import Action from './Action';
import Options from './Options';
import OptionModal from './OptionModal';

export default class DecisionTreeApp extends React.Component {
  state = {
    options: [],
    selectedOption: undefined
  };
  handleDeleteOptions = () => {
    this.setState(() => ({
      options: []
    }));
  };
  handleDeleteOption = optionToRemove => {
    this.setState(prevState => ({
      options: prevState.options.filter(option => optionToRemove !== option)
    }));
  };

  handleClearSelectedOption = () => {
    this.setState(() => ({ selectedOption: undefined }));
  };

  handlePick = () => {
    const randomNum = Math.floor(Math.random() * this.state.options.length);
    const option = this.state.options[randomNum];
    this.setState(() => ({
      selectedOption: option
    }));
  };

  handleAddOption = option => {
    if (!option) {
      return 'Enter valid value to add item';
    } else if (this.state.options.indexOf(option) > -1) {
      return 'This option already exists';
    }

    this.setState(prevState => ({
      options: prevState.options.concat(option)
    }));
  };

  componentDidMount() {
    try {
      const json = localStorage.getItem('options');
      const options = JSON.parse(json);

      if (options) {
        this.setState(() => ({ options }));
      }
    } catch (e) {
      // Do nothing at all
    }
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevState.options.length !== this.state.options.length) {
      const json = JSON.stringify(this.state.options);
      localStorage.setItem('options', json);
    }
  }
  componentWillUnmount() {
    console.log('componentWillUnmount');
  }
  render() {
    const subtitle = 'For binary life decisions, put your trust in a computer';

    return (
      <div>
        <Header subtitle={subtitle} />
        <div className="container">
          <Action
            hasOptions={this.state.options.length > 0}
            handlePick={this.handlePick}
          />
          <div className="widget">
            <Options
              options={this.state.options}
              handleDeleteOptions={this.handleDeleteOptions}
              handleDeleteOption={this.handleDeleteOption}
            />
            <AddOption handleAddOption={this.handleAddOption} />
          </div>
        </div>
        <OptionModal
          selectedOption={this.state.selectedOption}
          handleClearSelectedOption={this.handleClearSelectedOption}
        />
      </div>
    );
  }
}

或OptionModal.js：

import React from 'react';
import Modal from 'react-modal';

const OptionModal = (props) => (
  <Modal
    isOpen={!!props.selectedOption}
    onRequestClose={props.handleClearSelectedOption}
    contentLabel="Selected Option"
    closeTimeoutMS={200}
    className="modal"
  >
    <h3>Selected Option</h3>
    {props.selectedOption && <p>{props.selectedOption}</p>}
    <button onClick={props.handleClearSelectedOption}>Okay</button>
  </Modal>
);

export default OptionModal;

我在上面的任何代码中都没有看到任何语法错误。你们中有人看到语法错误吗？

在控制台中我收到此警告：

警告：React无法识别DOM元素上的Click道具。如果您故意希望它作为自定义属性显示在DOM中，请将其拼写为小写click。如果您不小心从父组件传递了它，请将其从DOM元素中删除。

但我不相信我在代码中的任何地方使用了Click道具。我甚至找了一个而且我没有看到它。

当我使用react dev工具并检查状态时，当我按下按钮时，我没有看到更改，只是在我添加选项时：

这是我的Action.js文件：

import React from 'react';

const Action = (props) => (
  <div>
    <button
      className="big-button"
      onClick={props.handlePick}
      disabled={!props.hasOptions}
    >
      What should I do?
    </button>
  </div>
);

export default Action;

Answer 1

我建议您查看Action.js的工作原理。根据您分享的内容，Action.js呈现了您的big-button。它需要两个道具才能运作。它需要handlePick和hasOptions。 hasOptions似乎是一个布尔值，让按钮知道它是已启用还是在您的情况下disabled。

handlePick是函数

handlePick = () => {
    const randomNum = Math.floor(Math.random() * this.state.options.length);
    const option = this.state.options[randomNum];
    this.setState(() => ({
      selectedOption: option
    }));
  };

其任务是随机选择一个项目并将其显示给模态。

我会专注于这些，假设你很清楚他们做了什么。在您的情况下，一旦您查看了Actions.js文件，您就会注意到handlePick的事件处理程序中有一个拼写错误。

再次，了解每个组件的工作原理对于有效的故障排除至关重要。

当我上床睡觉时，React Modal正在工作

1 个答案: