Question

我正在使用React并尝试将用户类型的文本保存到state的输入。我在textarea中添加了onChange属性来设置状态。

但是，当我开始输入时，我在控制台中看到错误{1}}。

我尝试过不同的尝试方法，但仍然没有。

TypeError: _this.setState is not a function

Answer 1

功能组件没有生命周期方法，而且...... state：）

const NewItemForm = props => (
    <Form onSubmit={props.send_form}>
        <Form.Group>
            <TextArea 
                placeholder='Name your first item here' 
                name='item_msg'
                onChange={e => this.setState({ item_msg: e.target.value })} />
            <Form.Button primary content='Create Item' />
        </Form.Group>
    </Form>
)

这不起作用：

onChange={e => this.setState({ item_msg: e.target.value })} />

您需要的是传递回调：

const NewItemForm = props => (
    <Form onSubmit={props.send_form}>
        <Form.Group>
            <TextArea 
                placeholder='Name your first item here' 
                name='item_msg'
                onChange={props.onInputChange} />
            <Form.Button primary content='Create Item' />
        </Form.Group>
    </Form>
)

class App extends Component {
    constructor () {
        super();
        this.state = {
          item_msg: ''
        }

        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleSubmit(e){ 
        e.preventDefault();
        console.log(this.state.item_msg);  
    }  
    handleInputChange(e) {
        this.setState({ item_msg: e.target.value })
    }

    render() {
        return (
            <div className="App">
                <MainHeaderr />
                <Container>
                    <NewItemForm send_form={this.handleSubmit} onInputChange={this.handleInputChange} />
                </Container>
            </div>
        );
    }
}

我知道你来自哪里，但NewItemForm会被转换为React Element，因此this将引用该元素，而不是App组件。

React without JSX

Answer 2

功能组件是无状态的，因此您无法在其中调用const NavLink = ({ exact, to, children, className, classes, onClick, }) => ( <RRNavLink to={to} exact={exact} className={cn(classes.root, className)} onClick={onClick}> {children} </RRNavLink> ); export default withStyles(theme => ({ root: { background: 'blue', }, }))(NavLink);。您可以从父组件传递回调，该组件在父组件中设置状态，如下所示：

setState

然后在您的handleChange = e => this.setState({ item_msg: e.target.value }); <NewItemForm onChange={this.handleChange} />组件中

NewItemForm

Answer 3

NewItemForm是函数组件，函数comopent没有生命周期方法使用类组件。

Answer 4

您需要使用箭头函数或将函数绑定到如下所示的构造函数中

constructor(props) {
super(props);
this.state = { date: new Date() };
this.tick = this.tick.bind(this);
}
setInterval(()=>this.tick, 1000);

或使用箭头功能

setInterval(()=>this.setState({
    date: new Date(),
  }), 1000);

React - TypeError：_this.setState不是函数

4 个答案: