警告:findDOMNode在StrictMode中已弃用findDOMNode传递了StrictMode内部的Transition实例

【字号: 日期:2024-04-19浏览:14作者:雯心
(adsbygoogle = window.adsbygoogle || []).push({}); 如何解决警告:findDOMNode在StrictMode中已弃用findDOMNode传递了StrictMode内部的Transition实例?

该setState呼叫看起来好像被写到了错误的地方。确保它在editTodo对象上:

handleChange = (event) => {this.setState(state => ({ editTodo: { ...state.editTodo, title: event.target.value, },})); }解决方法

我正在尝试使用功能作为组件内部的道具,而该组件是另一个组件的子代。但是功能不起作用。我能知道为什么吗。这是我在控制台中收到的警告。

警告:findDOMNode在StrictMode中已弃用。findDOMNode传递了StrictMode内部的Transition实例。而是直接将引用添加到要引用的元素

这是我的代码

class Todo extends Component { state = { show: false,editTodo: { id: '',title: '',isCompleted: false } } handleClose = () => { this.setState({ show: false }) } handleShow = () => { this.setState({ show: true }) } getStyle () { return { background: ’#f4f4f4’,padding: ’10px’,borderBottom: ’1px #ccc dotted’,textDecoration: this.props.todo.isCompleted ? ’line-through’: ’none’ } } //this method checks for changes in the edit field handleChange = (event) => { this.setState({ title: event.target.value }) console.log(this.state.editTodo.title); } render () { //destructuring const { id,title } = this.props.todo; return ( <div style={this.getStyle()}><p> <input type=’checkbox’ style={{ margin: '0px 20px' }} onChange={this.props.markComplete.bind(this,id)} /> {’’} {title} <Button style={{ float: 'right',margin: '0px 10px' }} variant='warning' size={'sm'} onClick={this.handleShow}>Edit</Button>{’ ’} <Button style={{ float: 'right' }} variant='danger' size={'sm'} onClick={this.props.DelItem.bind(this,id)}>Delete</Button></p><Modal show={this.state.show} onHide={this.handleClose}> <Modal.Header closeButton> <Modal.Title>Edit your Task!</Modal.Title> </Modal.Header> <Modal.Body > <FormGroup > <Form.Controltype='text'value={this.state.editTodo.title}onChange={this.handleChange} /> </FormGroup> </Modal.Body> <Modal.Footer> <Button variant='secondary' onClick={this.handleClose}> Close </Button> <Button variant='primary' onClick={this.handleClose}> Save Changes </Button> </Modal.Footer></Modal> </div> ) }}

相关文章: