ReactJS：This.props.toggleModal 不是函数

Posted 2023-02-23

【中文标题】ReactJS：This.props.toggleModal 不是函数

【英文标题】：ReactJS: This.props.toggleModal is not a function

【发布时间】：2018-07-31 20:32:42

【问题描述】：

我正在尝试从孩子访问父方法以在屏幕上显示模式，但出现错误：This.props.toggleModal is not a function。我正在将该方法传递给孩子，以便可以调用它并使用正确的状态（我认为）。该按钮确实调用了它自己的方法，该方法又调用了父级。模态组件位于 App.js 中。

App.js

class App extends Component 
  constructor() 
  super()
this.state = 
    isOpen: false
 

toggleModal = () => 
this.setState(
  isOpen: !this.state.isOpen
);
console.log('Open');

render() 
return (
  <div className="App">
    <Modal toggleModal=this.toggleModal show=this.state.isOpen
          onClose=this.toggleModal>
          Here's some content for the modal
    </Modal>
    <div className="container">
      <Header/>
      <main>
        <Route path="/users"
           children=( match, ...rest ) => (
             <TransitionGroup component=firstChild>
               match && <UserList ...rest />
             </TransitionGroup>
        )/>
        ...
      </main>
      <Footer />
    </div>
  </div>
);

SearchBar.js -（位于用户页面内）

class SearchBar extends Component 
constructor(props) 
super(props)
this.state = 
  type: this.props.type,
  value: ''
;

componentWillReceiveProps(nextProps) 
if (nextProps.type !== this.props.type) 
  this.setState( type: nextProps.type );

;
handleClick = (e) => 
e.preventDefault();
console.log("Clicked!!!");
this.props.toggleModal();
;
handleChange = e => 
  console.log(this.state.type);
  this.setState( value: e.target.value );
;

render () 
const isUser = this.state.type;
let rightContent = null;
if (isUser === "tour" || isUser === "venue") 
rightContent =
<div className="column">
  <div className="float-right"><button className="add-new" onClick=this.handleClick>Add New</button></div>
</div>
 else 
rightContent =
<div className="column">
    <div className="float-right">
      <div className="results-block">
        <b>0</b>/<small>292</small>
      </div>
    </div>
  </div>

return (
<div className="row main-search">
  <div className="column">
      <form action="">
        <fieldset>
          <label htmlFor="search">
            <input type="text"
                placeholder="Start typing..."
                id="search-box"
                onChange=this.handleChange
                value=this.state.value />
          </label>
        </fieldset>
      </form>
  </div>
  rightContent
</div>
)



export default SearchBar;

【问题讨论】：

我没有看到你在 App.js 中使用 SearchBar 组件，你能解释一下你在哪里使用过 SearchBar 吗？

【参考方案1】：

检查您是否在用户页面组件中将 toggleModal 作为道具。如果是，则将其明确传递给 SearchBar

<SearchBar toggleModal = this.props.toggleModal  /> // plus your rest of the props

【讨论】：

差不多了！ toggleModal=this.toggleModal 然后从我有this.props.toggleModal(); 的searchBar 组件单击方法中，谢谢。

干杯好友：D

【参考方案2】：

您必须在构造函数中将toggleModal与this绑定，以便将其用作this.toggleModal。 例

this.toggleModal = this.toggleModal.bind(this);

查看这个 ReactJs 文档了解更多信息。 https://reactjs.org/docs/handling-events.html

【讨论】：

这对于他上面给出的类中的箭头函数来说不是必需的。

他的toggleModal已经使用了箭头功能，我相信这不是问题

你的代码看起来没问题，所以我会根据你的错误信息猜测，你将“this”输入到“This”中（尝试检查这个错误）