Javascript 如何在ReactJS中更改输入的默认值?
我刚接触React,所以这可能是一个很容易的问题,我正在努力解决。假设我有一个非常简单的类,它使用默认值呈现输入。我希望这个输入具有我设置的值,但也能够更改它。但是,当它呈现时,输入字段被“hi”填充,我不能在上面写入或删除任何内容。我怎样才能做到这一点Javascript 如何在ReactJS中更改输入的默认值?,javascript,reactjs,class,input,Javascript,Reactjs,Class,Input,我刚接触React,所以这可能是一个很容易的问题,我正在努力解决。假设我有一个非常简单的类,它使用默认值呈现输入。我希望这个输入具有我设置的值,但也能够更改它。但是,当它呈现时,输入字段被“hi”填充,我不能在上面写入或删除任何内容。我怎样才能做到这一点 export class Hello extends React.Component { render(){ let i = "hi" return( <div>
export class Hello extends React.Component {
render(){
let i = "hi"
return(
<div>
<input type="input" value={i} />
</div>
);
}
导出类Hello扩展React.Component{
render(){
让我“嗨”
返回(
);
}
}将输入值存储为组件状态的一部分,并侦听输入字段上的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>
);
}
}
导出类Hello扩展React.Component{
状态={
文本框:“嗨”,
};
render(){
返回(
this.setState({textbox:ev.target.value})
/>
);
}
}
请参阅示例:为此,您需要使用状态。请看这里:我添加了一个不同的答案,这取决于您的组件是受控组件还是非受控组件,请参见差异 你可以在其他答案或答案中找到受控示例 非受控示例通常是在使用
元素时,在这种情况下,您可以只添加defaulValue
属性,如中所述
类名称表单扩展了React.Component{
建造师(道具){
超级(道具);
this.handleSubmit=this.handleSubmit.bind(this);
this.input=React.createRef();
}
handleSubmit(事件){
警报('已提交名称:'+this.input.current.value);
event.preventDefault();
}
render(){
返回(
);
}
}
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>
);
}
}