我是 React 的新手,所以这可能是一个我正在努力弄清楚的简单问题。假设我有一个非常简单的类,它使用默认值呈现输入。我希望此输入具有我设置的值,但也能够更改它。但是,当它呈现时,输入字段充满了“hi”,我无法在它上面写入或删除任何内容。我怎样才能做到这一点?
export class Hello extends React.Component {
render(){
let i = "hi"
return(
<div>
<input type="input" value={i} />
</div>
);
}
}
答案 0 :(得分:0)
将输入值存储为组件状态的一部分,并监听输入字段上的 onchange 事件以更新组件状态。
export class Hello extends React.Component {
state = {
textbox: "hi",
};
render() {
return(
<div>
<input
type="input"
value={this.state.textbox}
onChange={ev => this.setState({ textbox: ev.target.value })}
/>
</div>
);
}
}
查看示例:https://reactjs.org/docs/forms.html#controlled-components
答案 1 :(得分:0)
您需要为此目的使用状态。看这里:https://reactjs.org/docs/forms.html#controlled-components
答案 2 :(得分:0)
我要添加一些不同的答案,这取决于您的组件是受控组件还是非受控组件,请参阅差异 in docs。
您可以在其他答案或docs中找到受控示例。
不受控制的例子通常是在使用 <form/>
元素时,在这种情况下,您只需添加 related docs 中提到的 defaulValue
道具。
class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" defaultValue="hi" ref={this.input} />
<input type="submit" value="Submit" />
</form>
);
}
}