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

Question

我正在开发我的 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

我在这里做错了什么？

Answer 1

在 Box 组件的 构造函数 中，所有函数都绑定(bind)到 this，但 handleRemoveOption 不是.

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

将第 13 行编辑为

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

将解决您的问题!