对表单元素做出错误和正确的实践反应

Question

Hyall

您能否指出以下代码中的不良做法/错误？

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: "default title"
};
this.inputTxt = this.state.title;
this.myRef = React.createRef();
}
componentDidMount() {
this.myRef.current.value = this.inputTxt;
}
handleSubmit = e => {
e.preventDefault();
console.log("submitted");
this.setState({ ...this.state, title: this.inputTxt });
};
handleInput = e => {
this.inputTxt = e.target.value;
};
render() {
return (
<>
<div>{this.state.title}</div>
<form onSubmit={this.handleSubmit}>
<input
type="text"
onChange={this.handleInput}
ref={this.myRef}
></input>
<button type="submit">Save</button>
<button type="reset">Reset</button>
</form>
</>
);
}
}

还有一些特殊问题：

1. 是否可以使用 this.somevar 组件类的属性来存储变量的值？ 如何避免命名冲突？

2. 使用 refs 设置输入值正常吗？

3. 如果我想在一个输入控件中设置 onChange 并将值绑定到反应变量，它会冻结吗？ 如何获得 [(ngModel(] 对输入元素的类似角度的控制？

Answer 1

看来你把事情复杂化了。我认为这里不需要参考。我不认为设置类属性会触发重新渲染，因此这种管理输入的方式可能根本不起作用，无论它不是最佳实践。

只需使用状态作为值，并在更改时更新状态。为了保持灵活性，请使用输入的名称作为状态键。像这样：

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: "default title"
};
}
handleSubmit = e => {
e.preventDefault();
console.log("submitted");
// Not sure if thats what you're looking for..
// Also: no need to do {...this.state, }. setState does a merge, not overwrite
this.setState({ title: this.state.input1 }); 
};
handleChange = e => {
// Use e.target.name as the computed property name, 
// so it can be used for infinite number of inputs
this.setState({[e.target.name]: e.target.value});
};
render() {
return (
<>
<div>{this.state.title}</div>
<form onSubmit={this.handleSubmit}>
<input
type="text"
name="input1" // Give it a unique name for setting state
value={this.state.input1} // Specify the value instead of using a ref
onChange={this.handleChange}
></input>
<button type="submit">Save</button>
<button type="reset">Reset</button>
</form>
</>
);
}
}

这是指向 refs 上的反应文档的链接。 他们推荐的主要用例是：

• 管理焦点、文本选择或媒体播放。
• 触发命令式动画。
• 与第三方 DOM 库集成。 我不相信在这里适用。所以我不建议在这里使用它们。