在ReactJS中，输入文本框不会重置

我有下拉框、复选框、radiobox、输入框。我的重置按钮重置除输入文本框外的所有控件，键入的单词不会重置。我的代码中有什么问题？谢谢 App.js

import React，{Component}来自'React'；
从“./Input”导入输入；
类应用程序扩展组件{
//获得初始状态
getInitialState=（）=>{
常量初始状态={
关键字：“”
}
返回初始状态；
}
state=this.getInitialState（）；
//重置状态
onReset=（）=>{
this.setState（this.getInitialState（））；
} 
componentDidMount（）{
这是runSearch（）；
}
//调用API
runSearch=async（关键字）=>{
//API调用
});
//关键字提交
onKeywordSubmit=（关键字）=>{
this.setState（{keyword:keyword}）；
this.runSearch（关键字.toUpperCase（））；
}
onReset=（）=>{
this.setState（this.getInitialState（））；
} 
render（）{
返回(
输入关键字：
)
}
}

Input.js 从“React”导入React，{Component}

class Input extends Component {
state={keyword:''};
//event onInputChange
onInputChange=(event)=>{
    this.setState({keyword:event.target.value});

}
//event onKeywordSubmit
onKeywordSubmit=(event)=>{
    event.preventDefault();
    this.props.onSubmit(this.state.keyword);
}

render(){
    return (
        <form onSubmit={this.onKeywordSubmit}>

        <input type="textbox" value={this.state.keyword} onChange={this.onInputChange}  />

        </form>
    );
}
}
export default Input;

类输入扩展组件{
状态={关键字：'}；
//输入更改事件
onInputChange=（事件）=>{
this.setState（{关键字：event.target.value}）；
}
//事件onKeywordSubmit
onKeywordSubmit=（事件）=>{
event.preventDefault（）；
this.props.onSubmit（this.state.keyword）；
}
render（）{
返回(
);
}
}
导出默认输入；

---

即使单击“重置”按钮，输入文本框搜索词也会保持不变。

现在，您的状态逻辑分布在父级和子级，而您的子级（

Input

）不知道何时按下“重置”。如果您从输入中取出所有状态（将

onInputChange

移动到父级，并将

e.preventDefault

移动到父级的

onKeywordSubmit

），则所有有状态逻辑都将在一个地方处理，您的输入将只获得作为道具传递的新值（因此它根本不涉及重置）

类应用程序扩展组件{
getInitialState=（）。。。
state=this.getInitialState。。。
onReset=（）。。。
运行搜索=（）。。。
//输入更改事件
onInputChange=（事件）=>{
this.setState（{关键字：event.target.value}）；
}
//事件onKeywordSubmit
onKeywordSubmit=（事件）=>{
event.preventDefault（）；
const关键字=event.target.value；
this.setState（{keyword}）；
this.runSearch（关键字.toUpperCase（））；
}
render（）{
返回(
)
}
}

const输入=（{onSubmit，onChange，keyword}）=>(
);

现在，您的状态逻辑分布在父级和子级，并且您的子级（

输入

）不知道何时按下了重置。如果您从输入中取出所有状态（将

onInputChange

移动到父级，并将

e.preventDefault

移动到父级的

onKeywordSubmit

），则所有有状态逻辑都将在一个地方处理，您的输入将只获得作为道具传递的新值（因此它根本不涉及重置）

类应用程序扩展组件{
getInitialState=（）。。。
state=this.getInitialState。。。
onReset=（）。。。
运行搜索=（）。。。
//输入更改事件
onInputChange=（事件）=>{
this.setState（{关键字：event.target.value}）；
}
//事件onKeywordSubmit
onKeywordSubmit=（事件）=>{
event.preventDefault（）；
const关键字=event.target.value；
this.setState（{keyword}）；
this.runSearch（关键字.toUpperCase（））；
}
render（）{
返回(
)
}
}

const输入=（{onSubmit，onChange，keyword}）=>(
);

您已经在父组件中设置了处理表单状态和onChange的代码，但在子组件中没有使用它

由于您正在将

值

、

onChange

和

onSubmit

作为道具传递给

输入

组件，因此您应该通过

this.props在
输入
组件中使用它们

像这样的事情应该是个好的开始

import React, { Component } from "react";
import Input from "./Input";

class App extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    //get intial state
    getInitialState = () => {
        const initialState = {
            keyword: ""
        };
        return initialState;
    };

    state = this.getInitialState();

    //reset state
    onReset = () => {
        this.setState(this.getInitialState());
    };

    componentDidMount() {
        this.runSearch();
    }

    handleChange({ target: { value } }) {
        this.setState({ keyword: value });
    }

    //call API
    runSearch = async (keyword) => {
        //API CALL
    });

    //keywordsubmit
    onKeywordSubmit = e => {
        e.preventDefault();
        this.runSearch(this.state.keyword.toUpperCase());
    };

    render() {
        return (
            <div id="App">
                <label>Input keyword:</label>
                <Input onChange={this.handleChange} value={this.state.keyword} onSubmit={this.onKeywordSubmit} />
                <input type="reset" value="Reset Search" onClick={this.onReset} />
            </div>
        );
    }
}

import React，{Component}来自“React”；
从“/Input”导入输入；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
}
//获得初始状态
getInitialState=（）=>{
常量初始状态={
关键词：“
};
返回初始状态；
};
state=this.getInitialState（）；
//重置状态
onReset=（）=>{
this.setState（this.getInitialState（））；
};
componentDidMount（）{
这是runSearch（）；
}
handleChange（{target:{value}}）{
this.setState（{keyword:value}）；
}
//调用API
runSearch=async（关键字）=>{
//API调用
});
//关键字提交
onKeywordSubmit=e=>{
e、 预防默认值（）；
this.runSearch（this.state.keyword.toUpperCase（））；
};
render（）{
返回(
输入关键字：
);
}
}

和输入组件

class Input extends Component {
    render() {
        return (
            <form onSubmit={this.props.onSubmit}>
                <input type="textbox" value={this.props.value} onChange={this.props.onChange} />
            </form>
        );
    }
}
export default Input;

类输入扩展组件{
render（）{
返回(
);
}
}
导出默认输入；
您已经在父组件中设置了处理表单状态和onChange的代码，但在子组件中没有使用它

由于您正在将
值
、
onChange
和
onSubmit
作为道具传递给
输入
组件，因此您应该通过
this.props在
输入
组件中使用它们

像这样的事情应该是个好的开始

import React, { Component } from "react";
import Input from "./Input";

class App extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    //get intial state
    getInitialState = () => {
        const initialState = {
            keyword: ""
        };
        return initialState;
    };

    state = this.getInitialState();

    //reset state
    onReset = () => {
        this.setState(this.getInitialState());
    };

    componentDidMount() {
        this.runSearch();
    }

    handleChange({ target: { value } }) {
        this.setState({ keyword: value });
    }

    //call API
    runSearch = async (keyword) => {
        //API CALL
    });

    //keywordsubmit
    onKeywordSubmit = e => {
        e.preventDefault();
        this.runSearch(this.state.keyword.toUpperCase());
    };

    render() {
        return (
            <div id="App">
                <label>Input keyword:</label>
                <Input onChange={this.handleChange} value={this.state.keyword} onSubmit={this.onKeywordSubmit} />
                <input type="reset" value="Reset Search" onClick={this.onReset} />
            </div>
        );
    }
}

import React，{Component}来自“React”；
从“/Input”导入输入；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
}
//获得初始状态
getInitialState=（）=>{
常量初始状态={
import React, { Component } from "react";
import Input from "./Input";

class App extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    //get intial state
    getInitialState = () => {
        const initialState = {
            keyword: ""
        };
        return initialState;
    };

    state = this.getInitialState();

    //reset state
    onReset = () => {
        this.setState(this.getInitialState());
    };

    componentDidMount() {
        this.runSearch();
    }

    handleChange({ target: { value } }) {
        this.setState({ keyword: value });
    }

    //call API
    runSearch = async (keyword) => {
        //API CALL
    });

    //keywordsubmit
    onKeywordSubmit = e => {
        e.preventDefault();
        this.runSearch(this.state.keyword.toUpperCase());
    };

    render() {
        return (
            <div id="App">
                <label>Input keyword:</label>
                <Input onChange={this.handleChange} value={this.state.keyword} onSubmit={this.onKeywordSubmit} />
                <input type="reset" value="Reset Search" onClick={this.onReset} />
            </div>
        );
    }
}

class Input extends Component {
    render() {
        return (
            <form onSubmit={this.props.onSubmit}>
                <input type="textbox" value={this.props.value} onChange={this.props.onChange} />
            </form>
        );
    }
}
export default Input;