无法使用 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>
)
}
}
你应该避免，ref="googleInput"因为它现在被认为是遗留的。你应该声明
ref={(googleInput) => { this.googleInput = googleInput }}
在处理程序内部，您可以使用this.googleInput来引用元素。
然后在您的submitForm函数内部，您可以使用
this.googleInput._getText()
字符串引用是遗留的 https://facebook.github.io/react/docs/refs-and-the-dom.html
如果您之前使用过 React，您可能熟悉一个旧的 API，其中 ref 属性是一个字符串，如“textInput”，并且 DOM 节点作为 this.refs.textInput 被访问。我们建议不要这样做，因为字符串引用有一些问题，被认为是遗留的，并且可能会在未来的版本之一中被删除。如果您当前正在使用 this.refs.textInput 来访问 refs，我们建议改用回调模式。
编辑
从React 16.3 开始，创建refs的格式是：
class Component extends React.Component
{
constructor()
{
this.googleInput = React.createRef();
}
render()
{
return
(
<div ref={this.googleInput}>
{/* Details */}
</div>
);
}
}
使用ref={ inputRef => this.input = inputRef }现在被认为是inheritance。在 React 16.3之后，你可以使用下面的代码，
class MyForm extends React.Component {
constructor(props) {
//...
this.input = React.createRef();
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
编辑：感谢@stormwild的评论
getValue: function() {
return this.refs.googleInput.value;
}
我认为更惯用的方法是使用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。