如何在reactjs中使用this.refs从输入类型获取值？
如何在reactjs中使用this.refs从输入类型获取值？
提问于 2017-03-31 17:32:22
无法使用this.refs获取输入类型的值...如何从输入类型获取值
export class BusinessDetailsForm extends Component {
submitForm(data) {
console.log(this.refs.googleInput.value)
}
}
reder() {
return(
<form onSubmit={this.submitForm}>
<Field type="text"
name="location"
component={GoogleAutoComplete}
id="addressSearchBoxField"
ref="googleInput"
/>
</form>
)
}
}回答 6
Stack Overflow用户
发布于 2017-03-31 18:55:42
getValue: function() {
return this.refs.googleInput.value;
}Stack Overflow用户
发布于 2017-04-01 00:27:27
我认为更常用的方法是使用state而不是refs，尽管在本例中需要更多的代码，因为您只有一个输入。
export class BusinessDetailsForm extends Component {
constructor(props) {
super(props);
this.state = { googleInput: '' };
this.defaultValue = 'someValue';
this.handleChange = this.handleChange.bind(this);
this.submitForm = this.submitForm.bind(this);
}
handleChange(e) {
const { field, value } = e.target;
this.setState({ [field]: value });
}
submitForm() {
console.log(this.state.googleInput);
}
render() {
return (
<Formsy.Form onSubmit={this.submitForm} id="form_validation">
<Field type="text"
name="googleInput"
onChange={this.handleChange}
component={GoogleAutoComplete}
floatingLabelText="location"
hintText="location"
id="addressSearchBoxField"
defaultValue={this.defaultValue}
onSelectPlace={this.handlePlaceChanged}
validate={[ required ]}
/>
</Formsy.Form>
);
}
}参见https://facebook.github.io/react/docs/forms.html#controlled-components。
Stack Overflow用户
发布于 2020-11-09 21:13:33
如果有人想知道如何使用钩子实现ref：
// Import
import React, { useRef } from 'react';
const Component = () => {
// Create Refs
const exampleInput = useRef();
const handleSubmit = (e) => {
e.preventDefault();
const inputTest = exampleInput.current.value;
}
return(
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" ref={exampleInput} />
</label>
<input type="submit" value="Submit" />
</form>
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43137275
复制相关文章
相似问题