반응형
material-ui TextField, DropDownMenu 컴포넌트에서 데이터를 가져오려면 어떻게 해야 합니까?
폼을 만들고 여러 TextField, DropDownMenu material-ui 컴포넌트가 포함되어 있습니다.문제는 어떻게 하면 모든 TextFields, DropDownMenus에서 모든 데이터를 하나의 obj로 수집하여 서버로 전송할 수 있는가입니다.TextField의 경우 TextField.getValue() 입력 값을 반환합니다.하지만 사용법을 이해할 수 없다.
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 메서드로 보내고 싶습니다.
를 추가합니다.onChange각 사용자의 핸들러TextField그리고.DropDownMenu요소들.호출되면 이러한 입력의 새 값을 에 저장합니다.state고객님의Content요소.렌더에서 다음 값을 검색합니다.state그리고 그들을 '그들'로 넘긴다.value'제어된 컴포넌트'를 참조하십시오.
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>
)
}
});
이제 당신이 해야 할 일은_handleClickmethod는 모든 입력의 값을 취득하는 것입니다.this.state서버로 보냅니다.
를 사용할 수도 있습니다.React.addons.LinkedStateMixin이 프로세스를 쉽게 할 수 있습니다.2방향 바인딩 도우미를 참조하십시오.이전 코드는 다음과 같습니다.
var Content = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return {
textFieldValue: ''
};
},
render: function() {
return (
<div>
<TextField valueLink={this.linkState('textFieldValue')} />
</div>
)
}
});
승인된 답변을 사용/이것은 다른 (삭제된) 질문에 대한 답변이었습니다.
@karopastal
을 추가하다ref귀속<TextField />다음과 같이 getValue()를 호출합니다.
컴포넌트:
<TextField ref="myField" />
getValue 사용:
this.refs.myField.getValue()
여기에서는 모든 솔루션이 클래스 컴포넌트를 기반으로 합니다만, 이 시점에서 기능 컴포넌트를 사용하고 있는(저와 마찬가지로) 최근 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>
)
}
이거 드셔보세요.
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이라는 이름의 텍스트 입력을 저장하는 상태를 만들고 값 '을 할당합니다.
그런 다음 재료 UI를 반환합니다.<TextField />값 속성이 textInput 상태로 설정되어 있는 컴포넌트.이렇게 하면 textInput의 현재 값이 에 표시됩니다.<TextField />textInput 값을 변경하면 값 속성이 변경됩니다.<TextField />, React 제공.
다음으로 onChange 속성을 사용합니다.<TextField />핸들러 기능을 실행할 때마다<TextField /> 값 속성이 변경됩니다.이 핸들러 함수는 고정 handleTextInputChange에 저장되어 있는 화살표 함수입니다.그것은 사건을 논쟁으로 삼는다.onChange Atribut이 핸들러 기능을 실행하면 이벤트가 인수로서 핸들러 함수에 송신됩니다.
의 값<TextField />는 event.target.value에 저장됩니다.그런 다음 스테이트의 setTextInput 메서드를 사용하여 스테이트를 value 속성으로 설정합니다.<TextField /> 이 <TextField />이 값은 textInput 상태의 값입니다.
때문에, 「」에 입니다.<TextField />는 textInput 상태로 저장되어 필요에 따라 사용할 수 있습니다.
flson의 코드는 나에게 효과가 없었다.비슷한 상황에 있는 분들을 위해 조금 다른 코드를 알려드리겠습니다.
<TextField ref='myTextField'/>
이용하여 그 가치를 얻다
this.refs.myTextField.input.value
승인된 답변의 전략은 맞지만, 다음은 현재 버전의 React 및 Material-UI에서 작동하는 일반적인 예입니다.
데이터 흐름은 단방향이어야 합니다.
- initialState는 MyForm 컨트롤의 컨스트럭터에서 초기화됩니다.
TextArea는, 이 .- 변경은 TextAreas에 됩니다.
statethe를handleChange콜백 state에서 액세스 할 수 있습니다.onClick.callback---callback은 console.에 씁니다.검증을 추가하고 싶은 경우는, 거기에 액세스 할 수 있습니다.
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'));
1은 1은 1은 쓸 수 .handleChange 컴포넌트당 (callback per 을한 MUI를 제거합니다.event.persist()
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}
/>
...
)
}
이것은 완전한 코드가 아닙니다.
물질-의 코드를 물질-의 코드를 통해 접근할 수 있게 .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);
}
다음은 제가 생각해낸 가장 간단한 해결책입니다. material-ui text Field에 의해 생성된 입력값을 얻을 수 있습니다.
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>
)}
이게 도움이 되길 바라
여러분에 대해서는 잘 모르겠습니다만, 저는 게으른 이유로 'document'에서 ID로 텍스트 필드를 가져와 값을 백엔드 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 Content extends React.Component {
render() {
return (
<TextField ref={(input) => this.input = input} />
);
}
_doSomethingWithData() {
let inputValue = this.input.getValue();
}
}
언급URL : https://stackoverflow.com/questions/29791721/how-get-data-from-material-ui-textfield-dropdownmenu-components
반응형
'sourcecode' 카테고리의 다른 글
| javascript로 URL에 해시태그 첨부 (0) | 2023.04.04 |
|---|---|
| 인덱스로 JSON 개체의 속성을 검색하시겠습니까? (0) | 2023.04.04 |
| 형식 스크립트 속성이 유니언 유형에 없습니다. (0) | 2023.04.04 |
| 2개의 JSON 개체를 연결합니다. (0) | 2023.04.04 |
| Woocommerce 제품의 할인된 가격과 백분율을 표시합니다. (0) | 2023.04.04 |