相关疑难解决方法(0)

我在ES6中编写了一个简单的组件(使用BabelJS),并且函数this.setState不起作用.

典型的错误包括

无法读取未定义的属性'setState'

要么

this.setState不是函数

你知道为什么吗？这是代码:

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

我们应该避免在render内部绑定方法,因为在重新渲染期间它将创建新方法而不是使用旧方法,这将影响性能.

所以对于这样的场景:

<input onChange = { this._handleChange.bind(this) } ...../>

我们可以_handleChange在构造函数中绑定方法:

this._handleChange = this._handleChange.bind(this);

或者我们可以使用属性初始化器语法:

_handleChange = () => {....}

现在让我们考虑一下我们想要传递一些额外参数的情况,让我们说在一个简单的待办事项应用中,点击项目我需要从数组中删除项目,因为我需要传递每个项目索引或待办事项名称onClick方法:

todos.map(el => <div key={el} onClick={this._deleteTodo.bind(this, el)}> {el} </div>)

现在假设todo名称是唯一的.

根据DOC:

此语法的问题是每次组件呈现时都会创建不同的回调.

题:

如何在render方法中避免这种绑定方式或者这有什么替代方法？

请提供任何参考或示例,谢谢.

我一直收到这个错误，我不知道为什么，因为我尝试过的一切都不起作用。有谁知道为什么这不起作用以及它如何工作？

我在这里未定义：

this.setState({isAuthenticated: true})

这是我的代码：

class Login extends Component{

        constructor(props){
            super(props);

            this.state ={
                email: '',
                password: '',
                isAuthenticated: false
            };

            function login(username, email){
                sessionStorage.setItem('loginSessionUsername', username);
                sessionStorage.setItem('loginSessionEmail', email);
                this.setState({isAuthenticated: true})
            }
        }

        render(){
            const isAuthenticated = this.state.isAuthenticated;
            if(isAuthenticated){
                return(
                    <div>
                        <Servicedesk />     
                    </div>
                )
            }
            return(
                <div id='Login' className='setVisible'>
                    <div>
                        <label>Emailadres</label>
                        <input type='text' placeholder='je email' onChange={ev => this.setState({email: ev.target.value})}/>
                        <label>Wachtwoord</label>
                        <input type='password' placeholder='je wachtwoord' onChange={ev => this.setState({password: ev.target.value})}/>
                        <br />
                        <button onClick={(event => this.handleClick(event))}>Submit</button>
                    </div>
                </div>
            )
        }
    }

    export default …

在这里，我在反应中使用 onMouseOver 事件，但对我来说效果不佳。我使用正确的方式如何使用、调用和设置状态。这是我的代码，请任何人帮忙。

import React from 'react';

const style = {
    color:"black",
    fontSize:16,
    borderRadius:4,
    border: "1px solid grey",
    lineHeight: "28px",
    background: "white",
    padding: 3,
    margin:3,

  }


const highlightStyle = {
    color:"black",
    fontSize:16,
    border: "1px solid grey",
    background:"lightblue",
    borderRadius:4,
    lineHeight: "25px",
    padding: 3,
    margin:5
  }

export default class SplitSpansPreview extends React.Component {
    constructor(props){
        super(props)

        this.state = {    
            color_black: true,
            hover: false
        }

        this.changeColor = this.changeColor.bind(this)
        this.onHover = this.onHover.bind(this)
        this.hoverOn = this.hoverOn.bind(this)
        this.hoverOff = this.hoverOff.bind(this)
    }
    onHover() { alert("hello")
        this.setState({ hover: true …

我的反应组件中有以下事件.

/**
 * On search change handler.
 * @param {any} e Event object
 * @memberof Login
 */
onSearchValueChange(e) {
    this.setState({
        search: e.target.value,
    });
}

/**
 * Render the token view if present.
 * @param {object} e Event object.
 */
keyPress(e) {
    if (e.keyCode === 13 && this.state.search !== '') {
        e.preventDefault();
        searchPackage(this.state.search).then((response) => {
            this.setState({
                redirect: true,
                redirectOnSearch: true,
                searchResults: response.data,
            });
        });
    }
}

绑定到以下输入元素,该元素来自react-bootstrap.

<FormControl key='search' id='search' type='text' placeholder='Search Packages' value={this.state.search} onKeyDown={this.keyPress} onChange={this.onSearchValueChange} />

但是当我尝试在文本框中键入任何内容时,它只会触发keyPress …

我有形式将其值发送给一个函数：

 _onChange(ev, option) {

    console.log(option.key)  // option.key = 3

    this.setState({ dropdownValue:option.key })  // option key = "undefined"
 }

如您在上面看到的，我可以打印出该值，例如3。但是，当我尝试在之后直接将其添加到状态时，出现错误“无法设置未定义状态”。

我试图将值添加到变量，然后将其用于setState，但我仍然收到该错误。怎么来的？

我的onChange方法：

<ChoiceGroup
                            className="defaultChoiceGroup"
                            defaultSelectedKey="B"
                            options={[
                                {
                                    key: '1',
                                    text: 'test'
                                },
                                {
                                    key: '2',
                                    text: 'test2'
                                },
                                {
                                    key: '3',
                                    text: 'test3',

                                }
                            ]}
                            onChange={this._onChange }
                            label="Change password for..."
                            required={true}
                        />