reactjs - 未捕获的TypeError:props.handleRemoveOption不是函数

我正在使用我的react应用程序专门使用handleRemoveOption函数一次删除一项：

  handleRemoveOption(optionToRemove){
    this.setState((prevState) => ({
        options: prevState.options.filter((option) => optionToRemove !== option)
      }));
  }

这是我的完整代码：

class Box extends React.Component{
  constructor(props){
      super(props);
      this.state = {
          options: ['one', 'two', 'three']
      }
      this.handleRemoveAllOptions = this.handleRemoveAllOptions.bind(this);
      this.handleDecision = this.handleDecision.bind(this);
      this.handleAddOption = this.handleAddOption.bind(this);
      this.handleRemoveOption = this.handleRemoveOption(this);
  }
  handleRemoveAllOptions(){
      this.setState({
          options: []
      });
  }

  handleDecision(){
      const randomNum = Math.floor(Math.random() * this.state.options.length);
      const option = this.state.options[randomNum];
      alert(option);
  }

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

  handleRemoveOption(optionToRemove){
    this.setState((prevState) => ({
        options: prevState.options.filter((option) => optionToRemove !== option)
      }));
  }

  render(){
    const title = 'Indecision app';
    const subtitle = 'Put your life..';
      return(
          <div>
             <Header
               title={title}
               subtitle={subtitle}
             />
             <Action
               handleDecision={this.handleDecision}
               hasOptions={this.state.options.length === 0}
             />
             <Options
               options={this.state.options}
               hasOptions={this.state.options.length === 0}
               handleRemoveAllOptions={this.handleRemoveAllOptions}
               handleRemoveOption={this.handleRemoveOption}
            />
             <AddOption handleAddOption={this.handleAddOption} />
          </div>
      );
  }
}

const Header = (props) => {
    return(
        <div>
            <h1>{props.title}</h1>
            <h3>{props.subtitle}</h3>
        </div>
    );
};


const Action = (props) => {
  return(
     <div>
        <button
          onClick={props.handleDecision}
          disabled={props.hasOptions}>
          Decide for me
        </button>
     </div>
  );
};

const Options = (props) => {
    return(
      <div>
          <button
            onClick={props.handleRemoveAllOptions}
            disabled={props.hasOptions}>
            Remove All
          </button>
         <ol>
            { props.options.map((option) => (
              <Option
                key={option}
                optionText={option}
                handleRemoveOption={props.handleRemoveOption}
            />
            ))
            }
        </ol>
      </div>
    );
};

const Option = (props) => {
    return (
        <div>
                <li>
                    <span>{ props.optionText }</span>
                    <button
                      onClick={(e) => {
                        props.handleRemoveOption(props.optionText);
                      }}>
                      Remove Option
                    </button>
                </li>
        </div>
    );
};

class AddOption extends React.Component{
   constructor(props){
       super(props);
       this.handleAddOption = this.handleAddOption.bind(this);
   }

    handleAddOption(e){
        e.preventDefault();
        const option = e.target.option.value.trim();
        this.props.handleAddOption(option);
    }
    render(){
        return(
            <div>
                <form onSubmit={this.handleAddOption}>
                    <input type="text" name="option" />
                    <button>Add Option</button>
                </form>
            </div>
        );
    }
}


ReactDOM.render(<Box />, document.getElementById('app'))

当我单击每个项目的单个按钮时，它总是说Uncaught TypeError: props.handleRemoveOption is not a function

我在这里做错了什么？

最佳答案

在constructor组件的Box中，所有功能都绑定到this，但handleRemoveOption则没有。

请注意缺少的this.handleRemoveOption.**bind**(this)。

将第13行编辑为

    this.handleRemoveOption = this.handleRemoveOption.bind(this);

将解决您的问题！

关于reactjs - 未捕获的TypeError:props.handleRemoveOption不是函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61866965/