在受控的REACT组件中处理表单输入状态的最佳方法是什么?

我在React组件中有一个基本形式。 例如 :

export default class SimpleForm extends Component {

_isMounted = false;

state = {
    firstName:'',
    lastName : ''
};

changeState(data){
    this.setState(data);
}

handleInput(event){
    this.changeState({
        [event.target.name]:event.target.value
    })
}
render(){
    const {
        firstName,
        lastName
    } = this.state;

    return (
        <div className="">
            <Form>
                <FormGroup row>
                    <Label for="firstName" sm={3}>First Name</Label>
                    <Col sm={9}>
                        <Input  type="text" value={firstName} onChange={(event)=>{this.handleInput(event)}} name="firstName" id="firstName" className="input-lg" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="lastName" sm={3}>Last Name</Label>
                    <Col sm={9}>
                        <Input  type="text" value={lastName} onChange={(event)=>{this.handleInput(event)}} name="lastName" id="lastName" className="input-lg" />
                    </Col>
                </FormGroup>
            </Form>
        </div>
    );
}

}

我关心的是,每当我们更改输入字段时,状态都会改变。这绝对是标准方法。我不确定这是否是处理状态的唯一方法。使用这种方法,组件会在每次字符更改时重新呈现。这不贵吗? 如果我们有很多输入,并且可以说需要在某些输入字段上计算字符数,那么由于重新渲染工作繁重,计数值需要一些时间才能明显显示。

评论