Question

import React, { Component } from 'react';
import TaskBar from './Task';

class Todo extends Component {
    state = {
        todo: ''
    }

    changeHandler = (event) => {
        console.log(event.target.value);

    }

    render() {
        return (
            <React.Fragment>
                <div className="card">
                    <h5 className="card-header">Todo</h5>
                    <div className="card-body">
                        <h5 className="card-title">Task you want to do</h5>
                            <form>
                                <input type="text" className="form-control" value={this.state.todo} name="todo" onChange={(event) => this.changeHandler(event)} />
                            </form>
                    </div>
                    <button className="btn btn-primary">Go somewhere</button>  
               </div>   
            </React.Fragment>

                    )
    }

                }

export default Todo;

在上面的代码中，我不知道为什么我无法进行任何更改

2）我在公用文件夹中使用Bootstrap cdn，并且在这里使用这些类

Answer 1

您忘记在onchange处理程序中设置状态。

import React, { Component } from 'react';
import TaskBar from './Task';

class Todo extends Component {
    state = {
        todo: ''
    }

    changeHandler = (event) => {
        console.log(event.target.value);
        this.setState({todo: event.target.value}) //you forgot to do this//
    }

    render() {
        return (
            <React.Fragment>
                <div className="card">
                    <h5 className="card-header">Todo</h5>
                    <div className="card-body">
                        <h5 className="card-title">Task you want to do</h5>
                            <form>
                                <input type="text" className="form-control" value={this.state.todo} name="todo" onChange={(event) => this.changeHandler(event)} />
                            </form>
                    </div>
                    <button className="btn btn-primary">Go somewhere</button>  
               </div>   
            </React.Fragment>

                    )
    }

                }

export default Todo;

链接到codeandbox示例-https://codesandbox.io/s/jydjj?module=/example.js

目前，您的onchange使用箭头功能在每次点击时都会创建一个新功能，这被认为是不好的做法，所以我建议您改为这样做。

<input type="text" className="form-control" value={this.state.todo} name="todo" onChange={this.changeHandler} />

我的onchange方法在反应中不起作用

1 个答案: