React-如何将输入字段(受控)重置为默认值

Question

我想在点击"恢复默认值"按钮时恢复所有输入字段的默认值和总数，但它不起作用。到目前为止，在我编写的代码中，所有元素都封装在一个网格中

我提到的SO问题：

1. 将所有元素封装在一个窗体或div中并调用reset((
2. 对事件使用e.target.reset((。我用按钮的onClick事件尝试了这个，但说重置不是一个功能

实现此功能的首选方式是什么？提前感谢！

class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
code1: this.props.defaults[0],
code2: this.props.defaults[1],
code3: this.props.defaults[2],
total : 0
};
this.handleInput = this.handleInput.bind(this);
this.restoreDefaults = this.restoreDefaults(this);
}
handleInput() {
//some logic
}
updateCode = (e, k) => {
this.setState({
[`code${k}`]: e.target.value
},
() => {
this.updateTotal();
});
}
updateTotal = () => {
this.setState(prevState => ({
total: (+prevState.code1 + +prevState.code2 + +prevState.code3),
}),
() => {
if (this.state.total !== 100) {
this.setState({
isTotalInvalid: true
});
} else {
this.setState({
isTotalInvalid: false
});
}
});
}
restoreDefaults() {
this.setState({
code1: this.props.defaults[0],
code2: this.props.defaults[1],
code3: this.props.defaults[2],
total: 0,
)};
}
render() {
return (
<Spacer>
<Grid>
<Grid.Row>
<Grid.Column tiny={12} medium={10}>
<input type="number" defaultValue={this.state.code1} min="0" max="100" onKeyPress={this.handleInput} onBlur={e => this.updateCode(e, 1)} />
</Grid.Column>
<Grid.Column tiny={12} medium={10}>
<input type="number" defaultValue={this.state.code2} min="0" max="100" onKeyPress={this.handleInput} onBlur={e => this.updateCode(e, 2)} />
</Grid.Column>
<Grid.Column tiny={12} medium={10}>
<input type="number" defaultValue={this.state.code3} min="0" max="100" onKeyPress={this.handleInput} onBlur={e => this.updateCode(e, 3)} />
Total Field:
<span fontSize={14} weight={700}>{this.state.total}</span>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Button text="Restore Default" type="button" onClick= 
{this.restoreDefaults} />
</Grid.Row>
</Grid>
</Spacer>
);
}
}
export default Test;

Answer 1

受控输入需要两部分。

• 提供给输入的value
• 更改处理程序

记住：defaultValue只设置一次输入值。之后它就没有任何作用了。

这允许您通过编程控制输入值。

我在下面添加了一个非常简单的例子。

在本例中，我们通过保持值处于状态来控制它们。但这可能是在道具或redux或任何地方。

然后，当我们想要重置表单时，我们只需要将状态更改回其初始值。由于input是通过value道具(我们的状态(通知的，它有效地重置了。

class Example extends React.Component {
state = {
code1: '',
code2: '',
code3: '',
}

handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
}

handleReset = () => {
this.setState({
code1: '',
code2: '',
code3: '',
});
}
render() {
return (
<div>
<div>
<input 
type="number" 
name="code1"
value={this.state.code1} 
onChange={this.handleChange} 
min="0" 
max="100" 
/>
</div>
<div>
<input 
type="number" 
name="code2"
value={this.state.code2} 
onChange={this.handleChange} 
min="0" 
max="100" 
/>
</div>
<div>
<input 
type="number" 
name="code3"
value={this.state.code3} 
onChange={this.handleChange} 
min="0" 
max="100" 
/>
</div>
<button onClick={this.handleReset}>Reset</button>
</div>
)
}
}
ReactDOM.render(<Example/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

Answer 2

点击按钮重置所有输入：

1. 将所有输入放入<form>
2. 使用输入重置<input type="reset" />代替<button>
3. 设置默认值<input defaultValue={myDefaultValue} />而不是value
4. 输入复位必须在<form>内

通过实现这些更改，render()将如下所示：

render() {
return (
<form>
<Spacer>
<Grid>
<Grid.Row>
<Grid.Column tiny={12} medium={10}>
<input 
type="number" 
defaultValue={this.state.code1} 
min="0" 
max="100" 
onKeyPress={this.handleInput} 
onBlur={e => this.updateCode(e, 1)} />
</Grid.Column>
<Grid.Column tiny={12} medium={10}>
<input 
type="number" 
defaultValue={this.state.code2} 
min="0" 
max="100" 
onKeyPress={this.handleInput} 
onBlur={e => this.updateCode(e, 2)} />
</Grid.Column>
<Grid.Column tiny={12} medium={10}>
<input 
type="number" 
defaultValue={this.state.code3} 
min="0" 
max="100" 
onKeyPress={this.handleInput} 
onBlur={e => this.updateCode(e, 3)} />
Total Field:
<span fontSize={14} weight={700}>
{this.state.total}
</span>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<input 
value="Restore Default" 
type="reset" />
</Grid.Row>
</Grid>
</Spacer>
</form>
);
}

<form>元素有一个reset()函数，当点击输入重置按钮时会自动调用该函数。

注意：如果将onClick添加到输入重置按钮，则<form>不会重置。在这种情况下，您必须手动调用reset()。因此，如果你像这样使用onClick：

<input type="reset" value="Restore Default" onClick={handleClick} />

您应该手动重置<form>，如下所示：

function handleClick(event) {
const form = event.currentTarget.form;
form.reset();
//YOUR CUSTOM CODE GOES HERE
}