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

Question

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

import React, {Component} from 'react';
import Input from './Input';
Class App extends Component {
//get intial state
getInitialState = () => {
const initialState={
    keyword:''
 }
 return initialState;
}
state= this.getInitialState();
//reset state
onReset=()=>{
this.setState(this.getInitialState());

} 

componentDidMount(){
    this.runSearch();
}
//call API
runSearch=async(keyword)=>{
   //API CALL
});
//keywordsubmit
onKeywordSubmit=(keyword)=>{

this.setState({keyword:keyword});
this.runSearch(keyword.toUpperCase());

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

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

}

Input.js 导入 React, {Component} from 'react';

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;

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

Answer 1

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

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

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

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;

Answer 2

现在，您的状态逻辑分布在父母和孩子之间，您的孩子 (Input) 不知道何时按下了重置。如果您从 Input 中取出所有状态（将 onInputChange 移动到父级并将 e.preventDefault 移动到父级的 onKeywordSubmit），您所有的有状态逻辑都将在一个地方处理，您的 Input 将只获得新值作为道具传下来（所以它根本不会关心重置）

class App extends Component {
  getInitialState = () ...

  state = this.getInitialState...

  onReset = () ...

  runSearch = () ...

  //event onInputChange
  onInputChange = (event) => {
    this.setState({keyword:event.target.value});
  }

  //event onKeywordSubmit
  onKeywordSubmit = (event) => {
    event.preventDefault();
    const keyword = event.target.value;
    this.setState({ keyword });
    this.runSearch(keyword.toUpperCase());
  }

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

const Input = ({ onSubmit, onChange, keyword }) => (
    <form onSubmit={onSubmit}>
        <input type="textbox" value={keyword} onChange={onChange} />
    </form>
);