material-ui TextField, DropDownMenu 组件如何获取数据？
How get data from material-ui TextField, DropDownMenu components?
我创建表单，我有几个 TextField、DropDownMenu material-ui 组件，问题是我如何从一个对象中的所有 TextFields、DropDownMenus 收集所有数据并将其发送到服务器.对于 TextField，它具有 TextField.getValue() Returns 输入值。但我不明白如何使用它。
var React = require('react'),
mui = require('material-ui'),
Paper = mui.Paper,
Toolbar = mui.Toolbar,
ToolbarGroup = mui.ToolbarGroup,
DropDownMenu = mui.DropDownMenu,
TextField = mui.TextField,
FlatButton = mui.FlatButton,
Snackbar = mui.Snackbar;
var menuItemsIwant = [
{ payload: '1', text: '[Select a finacial purpose]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsIcan = [
{ payload: '1', text: '[Select an objective]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsHousing = [
{ payload: '1', text: '[Select housing]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsIlive = [
{ payload: '1', text: '[Select family mambers]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsLifestyle = [
{ payload: '1', text: '[Select lifestyle]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsLifestyle2 = [
{ payload: '1', text: '[Select savings]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsIncome = [
{ payload: '1', text: '[Select your yearly income]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var Content = React.createClass({
getInitialState: function() {
return {
//formData: {
// name: '',
// age: '',
// city: '',
// state: ''
//},
errorTextName: '',
errorTextAge: '',
errorTextCity: '',
errorTextState: ''
};
},
render: function() {
return (
<div className="container-fluid">
<div className="row color-bg"></div>
<div className="row main-bg">
<div className="container">
<div className="mui-app-content-canvas page-with-nav">
<div className="page-with-nav-content">
<Paper zDepth={1}>
<h2 className="title-h2">Now, what would you like to do?</h2>
<Toolbar>
<ToolbarGroup key={1} float="right">
<span>I want to</span>
<DropDownMenu
className="dropdown-long"
menuItems={menuItemsIwant}
//autoWidth={false}
/>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={2} float="right">
<span>So I can</span>
<DropDownMenu
className="dropdown-long"
menuItems={menuItemsIcan}
//autoWidth={false}
/>
</ToolbarGroup>
</Toolbar>
<h2 className="title-h2">Please, share a little about you.</h2>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={3} float="right">
<span>I am</span>
<TextField
id="name"
className="text-field-long"
ref="textfield"
hintText="Full name"
errorText={this.state.errorTextName}
onChange={this._handleErrorInputChange}
/>
<span>and I am</span>
<TextField
id="age"
className="text-field-short"
ref="textfield"
hintText="00"
errorText={this.state.errorTextAge}
onChange={this._handleErrorInputChange}
/>
<span className="span-right-measure">years of age.</span>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={4} float="right">
<span>I</span>
<DropDownMenu
hintText="I"
menuItems={menuItemsHousing}
//autoWidth={false}
/>
<span>in</span>
<TextField
id="city"
ref="textfield"
className="text-field-long"
hintText="City"
errorText={this.state.errorTextCity}
onChange={this._handleErrorInputChange}
/>
<span>,</span>
<TextField
id="state"
ref="textfield"
className="text-field-short text-field-right-measure"
hintText="ST"
errorText={this.state.errorTextState}
onChange={this._handleErrorInputChange}
/>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={5} float="right">
<span>Where I live</span>
<DropDownMenu
className="dropdown-long"
menuItems={menuItemsIlive}
//autoWidth={false}
/>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={6} float="right">
<span>My lifestyle is</span>
<DropDownMenu
className="dropdown-short"
menuItems={menuItemsLifestyle}
//autoWidth={false}
/>
<span>and I've saved</span>
<DropDownMenu
className="dropdown-short"
menuItems={menuItemsLifestyle2}
//autoWidth={false}
/>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={7} float="right">
<span>My yearly household is about</span>
<DropDownMenu
className="dropdown-mobile"
menuItems={menuItemsIncome}
//autoWidth={false}
/>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<div className="button-place">
<FlatButton
onTouchTap={this._handleClick}
label="I'm done lets go!"
/>
<Snackbar
ref="snackbar"
message="Invalid input, please check and try again"
/>
</div>
</Paper>
</div>
</div>
</div>
</div>
</div>
);
},
_handleErrorInputChange: function(e) {
if (e.target.id === 'name') {
var name = e.target.value;
this.setState({
//name: name,
errorTextName: e.target.value ? '' : 'Please, type your Name'
});
} else if (e.target.id === 'age') {
var age = e.target.value;
this.setState({
//age: age,
errorTextAge: e.target.value ? '' : 'Check Age'
});
} else if (e.target.id === 'city') {
var city = e.target.value;
this.setState({
//city: city,
errorTextCity: e.target.value ? '' : 'Type City'
});
} else if (e.target.id === 'state') {
var state = e.target.value;
this.setState({
//state: state,
errorTextState: e.target.value ? '' : 'Type State'
});
}
},
_handleClick: function(e) {
this.refs.snackbar.show();
//TODO: find a way to change errorText for all empty TextField
if (this.refs.textfield && this.refs.textfield.getValue().length === 0) {
this.setState({
errorTextState: 'Type State',
errorTextCity: 'Type City',
errorTextAge: 'Check Age',
errorTextName: 'Please, type your Name'
});
}
}
});
module.exports = Content;
我想用 _handleClick 方法在服务器上发送它。
为每个 TextField 和 DropDownMenu 元素添加一个 onChange 处理程序。调用时，将这些输入的新值保存在 Content 组件的 state 中。在渲染中，从 state 中检索这些值并将它们作为 value 属性传递。参见 Controlled Components。
var Content = React.createClass({
getInitialState: function() {
return {
textFieldValue: ''
};
},
_handleTextFieldChange: function(e) {
this.setState({
textFieldValue: e.target.value
});
},
render: function() {
return (
<div>
<TextField value={this.state.textFieldValue} onChange={this._handleTextFieldChange} />
</div>
)
}
});
现在您在 _handleClick 方法中所要做的就是从 this.state 检索所有输入的值并将它们发送到服务器。
您还可以使用 React.addons.LinkedStateMixin 来简化此过程。参见 Two-Way Binding Helpers。之前的代码变为：
var Content = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return {
textFieldValue: ''
};
},
render: function() {
return (
<div>
<TextField valueLink={this.linkState('textFieldValue')} />
</div>
)
}
});
使用已接受的答案/这是对另一个（已删除）问题的答案
@karopastal
向您的 <TextField /> 组件添加一个 ref 属性并对其调用 getValue()，如下所示：
组件：
<TextField ref="myField" />
使用获取值：
this.refs.myField.getValue()
flson 的代码对我不起作用。对于那些处于类似情况的人，这是我略有不同的代码：
<TextField ref='myTextField'/>
使用
获取其值
this.refs.myTextField.input.value
class Content extends React.Component {
render() {
return (
<TextField ref={(input) => this.input = input} />
);
}
_doSomethingWithData() {
let inputValue = this.input.getValue();
}
}
已接受答案的策略是正确的，但这里有一个通用示例，适用于当前版本的 React 和 Material-UI。
数据流应该是单向的：
- initialState 在 MyForm 控件的构造函数中初始化
TextArea 是从这个初始状态填充的- TextAreas 的更改通过
handleChange 回调传播到 state。
state 是从 onClick 回调访问的——现在它只是写入控制台。如果你想添加验证，它可以去那里。
import * as React from "react";
import TextField from "material-ui/TextField";
import RaisedButton from "material-ui/RaisedButton";
const initialState = {
error: null, // you could put error messages here if you wanted
person: {
firstname: "",
lastname: ""
}
};
export class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = initialState;
// make sure the "this" variable keeps its scope
this.handleChange = this.handleChange.bind(this);
this.onClick = this.onClick.bind(this);
}
render() {
return (
<div>
<div>{this.state.error}</div>
<div>
<TextField
name="firstname"
value={this.state.person.firstname}
floatingLabelText="First Name"
onChange={this.handleChange}/>
<TextField
name="lastname"
value={this.state.person.lastname}
floatingLabelText="Last Name"
onChange={this.handleChange}/>
</div>
<div>
<RaisedButton onClick={this.onClick} label="Submit!" />
</div>
</div>
);
}
onClick() {
console.log("when clicking, the form data is:");
console.log(this.state.person);
}
handleChange(event, newValue): void {
event.persist(); // allow native event access (see: https://facebook.github.io/react/docs/events.html)
// give react a function to set the state asynchronously.
// here it's using the "name" value set on the TextField
// to set state.person.[firstname|lastname].
this.setState((state) => state.person[event.target.name] = newValue);
}
}
React.render(<MyForm />, document.getElementById('app'));
（注意：您可能希望为每个 MUI 组件编写一个 handleChange 回调，以消除丑陋的 event.persist() 调用。）
这是我想出的最简单的解决方案，我们得到由 material-ui textField 创建的输入值：
create(e) {
e.preventDefault();
let name = this.refs.name.input.value;
alert(name);
}
constructor(){
super();
this.create = this.create.bind(this);
}
render() {
return (
<form>
<TextField ref="name" hintText="" floatingLabelText="Your name" /><br/>
<RaisedButton label="Create" onClick={this.create} primary={true} />
</form>
)}
希望这对您有所帮助。
自从在这里提出问题以来很长一段时间后才遇到这个问题。在检查 material-ui 代码时，我发现它现在可以通过 inputRef 属性.
访问
...
<CssTextField
inputRef={(c) => {this.myRefs.username = c}}
label="Username"
placeholder="xxxxxxx"
margin="normal"
className={classes.textField}
variant="outlined"
fullWidth
/>
...
然后像这样访问值。
onSaveUser = () => {
console.log('Saving user');
console.log(this.myRefs.username.value);
}
我不了解你们，但出于我自己的懒惰目的，我只是通过 ID 从 'document' 获取文本字段，并将值设置为我的后端 JS 函数的参数：
//index.js
<TextField
id="field1"
...
/>
<TextField
id="field2"
...
/>
<Button
...
onClick={() => { printIt(document.getElementById('field1').value,
document.getElementById('field2').value)
}}>
//printIt.js
export function printIt(text1, text2) {
console.log('on button clicked');
alert(text1);
alert(text2);
};
它工作得很好。
这里所有的解决方案都是基于Class组件，
但我想大多数最近学习 React 的人（比如我），
此时使用功能组件。
所以这是基于功能组件的解决方案。
使用 ReactJs 的 useRef 钩子和 TextField 的 inputRef 属性。
import React, { useRef, Component } from 'react'
import { TextField, Button } from '@material-ui/core'
import SendIcon from '@material-ui/icons/Send'
export default function MultilineTextFields() {
const valueRef = useRef('') //creating a refernce for TextField Component
const sendValue = () => {
return console.log(valueRef.current.value) //on clicking button accesing current value of TextField and outputing it to console
}
return (
<form noValidate autoComplete='off'>
<div>
<TextField
id='outlined-textarea'
label='Content'
placeholder='Write your thoughts'
multiline
variant='outlined'
rows={20}
inputRef={valueRef} //connecting inputRef property of TextField to the valueRef
/>
<Button
variant='contained'
color='primary'
size='small'
endIcon={<SendIcon />}
onClick={sendValue}
>
Send
</Button>
</div>
</form>
)
}
2020 年 TextField，通过功能组件：
const Content = () => {
...
const textFieldRef = useRef();
const readTextFieldValue = () => {
console.log(textFieldRef.current.value)
}
...
return(
...
<TextField
id="myTextField"
label="Text Field"
variant="outlined"
inputRef={textFieldRef}
/>
...
)
}
请注意，这不是完整的代码。
试试这个，
import React from 'react';
import {useState} from 'react';
import TextField from '@material-ui/core/TextField';
const Input = () => {
const [textInput, setTextInput] = useState('');
const handleTextInputChange = event => {
setTextInput(event.target.value);
};
return(
<TextField
label="Text Input"
value= {textInput}
onChange= {handleTextInputChange}
/>
);
}
export default Input;
如果上面的代码不清楚，请说明。
首先我们创建一个状态来存储名为 textInput 的文本输入，并为其分配值 ''。
然后我们 return 一个 material UI <TextField /> 组件，其 value 属性设置为 textInput 状态。这样做我们在 <TextField /> 中显示 textInput 的当前值。 textInput 值的任何更改都将更改 <TextField /> 的 value 属性，由 React 提供。
然后我们使用 <TextField /> 的 onChange 属性来 运行 每次 <TextField /> [=34] 的值的处理函数=]value 属性变化。这个处理函数是一个箭头函数，存储在常量 handleTextInputChange 中。它需要一个 event 作为参数。当 onChange 属性 运行 是处理函数时，它将 事件 作为参数发送给处理函数。
<TextField /> 的值存储在 event.target.value 中。然后我们使用state的setTextInput方法将state设置为<TextField />的value属性。因此，此更改反映在 <TextField /> 中，其 value 属性是 textInput 状态的值。
因此输入到 <TextField /> 的数据以 textInput 状态存储，以备在需要时使用。
我创建表单，我有几个 TextField、DropDownMenu material-ui 组件，问题是我如何从一个对象中的所有 TextFields、DropDownMenus 收集所有数据并将其发送到服务器.对于 TextField，它具有 TextField.getValue() Returns 输入值。但我不明白如何使用它。
var React = require('react'),
mui = require('material-ui'),
Paper = mui.Paper,
Toolbar = mui.Toolbar,
ToolbarGroup = mui.ToolbarGroup,
DropDownMenu = mui.DropDownMenu,
TextField = mui.TextField,
FlatButton = mui.FlatButton,
Snackbar = mui.Snackbar;
var menuItemsIwant = [
{ payload: '1', text: '[Select a finacial purpose]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsIcan = [
{ payload: '1', text: '[Select an objective]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsHousing = [
{ payload: '1', text: '[Select housing]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsIlive = [
{ payload: '1', text: '[Select family mambers]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsLifestyle = [
{ payload: '1', text: '[Select lifestyle]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsLifestyle2 = [
{ payload: '1', text: '[Select savings]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsIncome = [
{ payload: '1', text: '[Select your yearly income]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var Content = React.createClass({
getInitialState: function() {
return {
//formData: {
// name: '',
// age: '',
// city: '',
// state: ''
//},
errorTextName: '',
errorTextAge: '',
errorTextCity: '',
errorTextState: ''
};
},
render: function() {
return (
<div className="container-fluid">
<div className="row color-bg"></div>
<div className="row main-bg">
<div className="container">
<div className="mui-app-content-canvas page-with-nav">
<div className="page-with-nav-content">
<Paper zDepth={1}>
<h2 className="title-h2">Now, what would you like to do?</h2>
<Toolbar>
<ToolbarGroup key={1} float="right">
<span>I want to</span>
<DropDownMenu
className="dropdown-long"
menuItems={menuItemsIwant}
//autoWidth={false}
/>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={2} float="right">
<span>So I can</span>
<DropDownMenu
className="dropdown-long"
menuItems={menuItemsIcan}
//autoWidth={false}
/>
</ToolbarGroup>
</Toolbar>
<h2 className="title-h2">Please, share a little about you.</h2>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={3} float="right">
<span>I am</span>
<TextField
id="name"
className="text-field-long"
ref="textfield"
hintText="Full name"
errorText={this.state.errorTextName}
onChange={this._handleErrorInputChange}
/>
<span>and I am</span>
<TextField
id="age"
className="text-field-short"
ref="textfield"
hintText="00"
errorText={this.state.errorTextAge}
onChange={this._handleErrorInputChange}
/>
<span className="span-right-measure">years of age.</span>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={4} float="right">
<span>I</span>
<DropDownMenu
hintText="I"
menuItems={menuItemsHousing}
//autoWidth={false}
/>
<span>in</span>
<TextField
id="city"
ref="textfield"
className="text-field-long"
hintText="City"
errorText={this.state.errorTextCity}
onChange={this._handleErrorInputChange}
/>
<span>,</span>
<TextField
id="state"
ref="textfield"
className="text-field-short text-field-right-measure"
hintText="ST"
errorText={this.state.errorTextState}
onChange={this._handleErrorInputChange}
/>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={5} float="right">
<span>Where I live</span>
<DropDownMenu
className="dropdown-long"
menuItems={menuItemsIlive}
//autoWidth={false}
/>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={6} float="right">
<span>My lifestyle is</span>
<DropDownMenu
className="dropdown-short"
menuItems={menuItemsLifestyle}
//autoWidth={false}
/>
<span>and I've saved</span>
<DropDownMenu
className="dropdown-short"
menuItems={menuItemsLifestyle2}
//autoWidth={false}
/>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={7} float="right">
<span>My yearly household is about</span>
<DropDownMenu
className="dropdown-mobile"
menuItems={menuItemsIncome}
//autoWidth={false}
/>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<div className="button-place">
<FlatButton
onTouchTap={this._handleClick}
label="I'm done lets go!"
/>
<Snackbar
ref="snackbar"
message="Invalid input, please check and try again"
/>
</div>
</Paper>
</div>
</div>
</div>
</div>
</div>
);
},
_handleErrorInputChange: function(e) {
if (e.target.id === 'name') {
var name = e.target.value;
this.setState({
//name: name,
errorTextName: e.target.value ? '' : 'Please, type your Name'
});
} else if (e.target.id === 'age') {
var age = e.target.value;
this.setState({
//age: age,
errorTextAge: e.target.value ? '' : 'Check Age'
});
} else if (e.target.id === 'city') {
var city = e.target.value;
this.setState({
//city: city,
errorTextCity: e.target.value ? '' : 'Type City'
});
} else if (e.target.id === 'state') {
var state = e.target.value;
this.setState({
//state: state,
errorTextState: e.target.value ? '' : 'Type State'
});
}
},
_handleClick: function(e) {
this.refs.snackbar.show();
//TODO: find a way to change errorText for all empty TextField
if (this.refs.textfield && this.refs.textfield.getValue().length === 0) {
this.setState({
errorTextState: 'Type State',
errorTextCity: 'Type City',
errorTextAge: 'Check Age',
errorTextName: 'Please, type your Name'
});
}
}
});
module.exports = Content;
我想用 _handleClick 方法在服务器上发送它。
为每个 TextField 和 DropDownMenu 元素添加一个 onChange 处理程序。调用时，将这些输入的新值保存在 Content 组件的 state 中。在渲染中，从 state 中检索这些值并将它们作为 value 属性传递。参见 Controlled Components。
var Content = React.createClass({
getInitialState: function() {
return {
textFieldValue: ''
};
},
_handleTextFieldChange: function(e) {
this.setState({
textFieldValue: e.target.value
});
},
render: function() {
return (
<div>
<TextField value={this.state.textFieldValue} onChange={this._handleTextFieldChange} />
</div>
)
}
});
现在您在 _handleClick 方法中所要做的就是从 this.state 检索所有输入的值并将它们发送到服务器。
您还可以使用 React.addons.LinkedStateMixin 来简化此过程。参见 Two-Way Binding Helpers。之前的代码变为：
var Content = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return {
textFieldValue: ''
};
},
render: function() {
return (
<div>
<TextField valueLink={this.linkState('textFieldValue')} />
</div>
)
}
});
使用已接受的答案/这是对另一个（已删除）问题的答案
@karopastal
向您的 <TextField /> 组件添加一个 ref 属性并对其调用 getValue()，如下所示：
组件：
<TextField ref="myField" />
使用获取值：
this.refs.myField.getValue()
flson 的代码对我不起作用。对于那些处于类似情况的人，这是我略有不同的代码：
<TextField ref='myTextField'/>
使用
获取其值this.refs.myTextField.input.value
class Content extends React.Component {
render() {
return (
<TextField ref={(input) => this.input = input} />
);
}
_doSomethingWithData() {
let inputValue = this.input.getValue();
}
}
已接受答案的策略是正确的，但这里有一个通用示例，适用于当前版本的 React 和 Material-UI。
数据流应该是单向的：
- initialState 在 MyForm 控件的构造函数中初始化
TextArea是从这个初始状态填充的- TextAreas 的更改通过
handleChange回调传播到state。 state是从onClick回调访问的——现在它只是写入控制台。如果你想添加验证，它可以去那里。
import * as React from "react";
import TextField from "material-ui/TextField";
import RaisedButton from "material-ui/RaisedButton";
const initialState = {
error: null, // you could put error messages here if you wanted
person: {
firstname: "",
lastname: ""
}
};
export class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = initialState;
// make sure the "this" variable keeps its scope
this.handleChange = this.handleChange.bind(this);
this.onClick = this.onClick.bind(this);
}
render() {
return (
<div>
<div>{this.state.error}</div>
<div>
<TextField
name="firstname"
value={this.state.person.firstname}
floatingLabelText="First Name"
onChange={this.handleChange}/>
<TextField
name="lastname"
value={this.state.person.lastname}
floatingLabelText="Last Name"
onChange={this.handleChange}/>
</div>
<div>
<RaisedButton onClick={this.onClick} label="Submit!" />
</div>
</div>
);
}
onClick() {
console.log("when clicking, the form data is:");
console.log(this.state.person);
}
handleChange(event, newValue): void {
event.persist(); // allow native event access (see: https://facebook.github.io/react/docs/events.html)
// give react a function to set the state asynchronously.
// here it's using the "name" value set on the TextField
// to set state.person.[firstname|lastname].
this.setState((state) => state.person[event.target.name] = newValue);
}
}
React.render(<MyForm />, document.getElementById('app'));
（注意：您可能希望为每个 MUI 组件编写一个 handleChange 回调，以消除丑陋的 event.persist() 调用。）
这是我想出的最简单的解决方案，我们得到由 material-ui textField 创建的输入值：
create(e) {
e.preventDefault();
let name = this.refs.name.input.value;
alert(name);
}
constructor(){
super();
this.create = this.create.bind(this);
}
render() {
return (
<form>
<TextField ref="name" hintText="" floatingLabelText="Your name" /><br/>
<RaisedButton label="Create" onClick={this.create} primary={true} />
</form>
)}
希望这对您有所帮助。
自从在这里提出问题以来很长一段时间后才遇到这个问题。在检查 material-ui 代码时，我发现它现在可以通过 inputRef 属性.
...
<CssTextField
inputRef={(c) => {this.myRefs.username = c}}
label="Username"
placeholder="xxxxxxx"
margin="normal"
className={classes.textField}
variant="outlined"
fullWidth
/>
...
然后像这样访问值。
onSaveUser = () => {
console.log('Saving user');
console.log(this.myRefs.username.value);
}
我不了解你们，但出于我自己的懒惰目的，我只是通过 ID 从 'document' 获取文本字段，并将值设置为我的后端 JS 函数的参数：
//index.js
<TextField
id="field1"
...
/>
<TextField
id="field2"
...
/>
<Button
...
onClick={() => { printIt(document.getElementById('field1').value,
document.getElementById('field2').value)
}}>
//printIt.js
export function printIt(text1, text2) {
console.log('on button clicked');
alert(text1);
alert(text2);
};
它工作得很好。
这里所有的解决方案都是基于Class组件， 但我想大多数最近学习 React 的人（比如我）， 此时使用功能组件。 所以这是基于功能组件的解决方案。
使用 ReactJs 的 useRef 钩子和 TextField 的 inputRef 属性。
import React, { useRef, Component } from 'react'
import { TextField, Button } from '@material-ui/core'
import SendIcon from '@material-ui/icons/Send'
export default function MultilineTextFields() {
const valueRef = useRef('') //creating a refernce for TextField Component
const sendValue = () => {
return console.log(valueRef.current.value) //on clicking button accesing current value of TextField and outputing it to console
}
return (
<form noValidate autoComplete='off'>
<div>
<TextField
id='outlined-textarea'
label='Content'
placeholder='Write your thoughts'
multiline
variant='outlined'
rows={20}
inputRef={valueRef} //connecting inputRef property of TextField to the valueRef
/>
<Button
variant='contained'
color='primary'
size='small'
endIcon={<SendIcon />}
onClick={sendValue}
>
Send
</Button>
</div>
</form>
)
}
2020 年 TextField，通过功能组件：
const Content = () => {
...
const textFieldRef = useRef();
const readTextFieldValue = () => {
console.log(textFieldRef.current.value)
}
...
return(
...
<TextField
id="myTextField"
label="Text Field"
variant="outlined"
inputRef={textFieldRef}
/>
...
)
}
请注意，这不是完整的代码。
试试这个，
import React from 'react';
import {useState} from 'react';
import TextField from '@material-ui/core/TextField';
const Input = () => {
const [textInput, setTextInput] = useState('');
const handleTextInputChange = event => {
setTextInput(event.target.value);
};
return(
<TextField
label="Text Input"
value= {textInput}
onChange= {handleTextInputChange}
/>
);
}
export default Input;
如果上面的代码不清楚，请说明。
首先我们创建一个状态来存储名为 textInput 的文本输入，并为其分配值 ''。
然后我们 return 一个 material UI <TextField /> 组件，其 value 属性设置为 textInput 状态。这样做我们在 <TextField /> 中显示 textInput 的当前值。 textInput 值的任何更改都将更改 <TextField /> 的 value 属性，由 React 提供。
然后我们使用 <TextField /> 的 onChange 属性来 运行 每次 <TextField /> [=34] 的值的处理函数=]value 属性变化。这个处理函数是一个箭头函数，存储在常量 handleTextInputChange 中。它需要一个 event 作为参数。当 onChange 属性 运行 是处理函数时，它将 事件 作为参数发送给处理函数。
<TextField /> 的值存储在 event.target.value 中。然后我们使用state的setTextInput方法将state设置为<TextField />的value属性。因此，此更改反映在 <TextField /> 中，其 value 属性是 textInput 状态的值。
因此输入到 <TextField /> 的数据以 textInput 状态存储，以备在需要时使用。