ν¬μ»€μ€κ°μλ ν
μ€νΈ νλκ° setState
μν΄ λ€μ λ λλ§λλ©΄ ν¬μ»€μ€λ₯Ό μμ΅λλ€.
+1
Textfieldsκ° μννκ² μλνλλ‘νλ €λ©΄ defaultValueμ ν¨κ» onBlur μ΄λ²€νΈλ₯Ό μ¬μ©ν΄μΌν©λλ€.
λꡬλ μ§μ΄ μμ μ μν ν μμλ ν΄κ²° λ°©λ²μ΄ μμ΅λκΉ?
λλ μ΄κ²μ΄ λ μ΄μ λ¬Έμ λΌκ³ μκ°νμ§ μμ΅λλ€. μλ μ½λλ₯Ό μ°Έμ‘°νμμμ€.
//taken from examples/webpack-example
/** In this file, we create a React component which incorporates components provided by material-ui */
const React = require('react');
const RaisedButton = require('material-ui/lib/raised-button');
const TextField = require('material-ui/lib/text-field');
const Dialog = require('material-ui/lib/dialog');
const ThemeManager = require('material-ui/lib/styles/theme-manager');
const LightRawTheme = require('material-ui/lib/styles/raw-themes/light-raw-theme');
const Colors = require('material-ui/lib/styles/colors');
const Main = React.createClass({
childContextTypes: {
muiTheme: React.PropTypes.object,
},
getInitialState () {
return {
muiTheme: ThemeManager.getMuiTheme(LightRawTheme),
counter: 0,
};
},
getChildContext() {
return {
muiTheme: this.state.muiTheme,
};
},
componentWillMount() {
let newMuiTheme = ThemeManager.modifyRawThemePalette(this.state.muiTheme, {
accent1Color: Colors.deepOrange500,
});
this.setState({muiTheme: newMuiTheme});
},
componentDidMount() {
this.refs.textField.focus();
},
render() {
console.log(this.state.counter);
let containerStyle = {
textAlign: 'center',
paddingTop: '200px',
};
let standardActions = [
{ text: 'Okay' },
];
return (
<div style={containerStyle}>
<Dialog
title="Super Secret Password"
actions={standardActions}
ref="superSecretPasswordDialog">
1-2-3-4-5
</Dialog>
<h1>material-ui</h1>
<h2>example project</h2>
<TextField ref="textField" onChange = {this._incrementStateCounter}/>
<RaisedButton label="Super Secret Password" primary={true} onTouchTap={this._handleTouchTap} />
</div>
);
},
_handleTouchTap() {
this.refs.superSecretPasswordDialog.show();
},
_incrementStateCounter () {
this.setState({counter: this.state.counter + 1});
},
});
module.exports = Main;
λ€μμ μ€νμ€μΈ μ±μ λλ€ (TextField μ λ ₯μ΄ λ³κ²½λ¨μ λ°λΌ μ λ°μ΄νΈ λ μνκ° μ½μμ κΈ°λ‘λ¨). TextFieldκ° ν¬μ»€μ€λ₯Ό μ μ§νλ κ²μ λ³Ό μ μμ΅λλ€.
λλ μμ§λ μ΄κ²μ μ»λλ€. @ shaurya947 μμ λ TextFieldμ μ΄κΈ° κ° μμ±μ΄ μκΈ° λλ¬Έμ λ²κ·Έλ₯Ό μ¬ννμ§ λͺ»νμ΅λλ€.
μ¬μ©μ μ¬ννκΈ° μν΄
<TextField ref="textField" value={this.state.valueToBeEdited} onChange = {this._incrementStateCounter}/>
λλ
<TextField ref="textField" defaultValue={this.state.valueToBeEdited} onChange = {this._incrementStateCounter}/>
λλ λνμ΄ λ¬Έμ μ νκ·λ‘ 보μ΄λ κ²μλ³΄κ³ μλ€. λ΄ TextFieldsκ° λ€μ λ λλ§μ μ΄μ μ μκ³ μμ΅λλ€. λ΄κ°νκ³ μμ΄μ value
μ μν TextField
κ·Έκ²μ΄ μ μ΄ κ΅¬μ± μμμ
λλ€, κ·Έλμ.
μ½μμ μ κ²½κ³ κ° νμλ©λλ€. 'TextFieldκ° μ μ΄ ν ν
μ€νΈ μ νμ μ μ΄λμ§ μμ μ
λ ₯μ λ³κ²½νκ³ μμ΅λλ€.' λλ μ μ κ·Έκ²μ λ³Έ κΈ°μ΅μ΄ μμΌλ©° μ¬κΈ°μ κ΄λ ¨μ΄ μλμ§ μ¬λΆκ° νμ€νμ§ μμ΅λλ€. TextField
첫 λ²μ§Έ λ¬Έμλ₯Ό μ
λ ₯νλ©΄ κ²½κ³ κ° λνλ©λλ€.
μ½κ°μ λλ²κΉ
μ ν΅ν΄ TextField
κ° μ΄μ μ μλ μμΈμ΄λλ κ²μΌλ‘ 보μ
λλ€. λ΄λΆ onBlur
μ²λ¦¬κΈ°λμ΄ ν κΈ νΈμΆ isFocused
μ λ΄λΆ μν TextField
κ±°μ§. onBlur
μ²λ¦¬κΈ° λμ document.activeElement
λ₯Ό κΈ°λ‘νλ©΄ (μ΄λ€ κ΅¬μ± μμκ° ν¬μ»€μ€λ₯Ό νμ³€λ μ§ νμΈνκΈ° μν΄) λ¬Έμμ λ£¨νΈ (λ³Έλ¬Έ)λ₯Ό κΈ°λ‘ν©λλ€.
νλ¦Ό μ΄λ²€νΈμ μμ€κ° μ±μ λ€λ₯Έ κ³³μμ Menu
λ΄μμ 첫 λ²μ§Έ MenuItem
μμ νμΈνμ¬μ΄ λ²μλ₯Ό λ μ’ν μμμμ΅λλ€. disableAutoFocus
μμ±μ true
μ€μ νμ¬ λ¬Έμ κ° ν΄κ²°λμμ΅λλ€. μ΄κ²μ΄ λ€λ₯Έ μ¬λμκ² λμμ΄λκΈ°λ₯Ό λ°λλλ€.
μ΄λ₯Ό ν¬μ°©νκΈ° μν΄ λ³λμ λ¬Έμ λ₯Ό μ΄μμ΅λλ€ : # 4387.
μ΄κ²μ΄ μ¬μ ν λ¬Έμ λΌλ κ²μ νμΈν μ μμ΅λλ€ ...
λ§€μ° κ°λ¨ν λ‘κ·ΈμΈ μμμΌλ‘보기-λλ μ΄κ²μ redux μμκ³Ό ν¨κ» μ¬μ©νκ³ μμΌλ©° μμκ³Ό μνΈ μμ©ν λ μ΄μ μ μλ λ€μ λ λλ§ (리λμ€ μμ μ©μ΄λ‘ νλλ₯Ό λ§μ§)μ΄ λ°μν©λλ€.
ν΄κ²° λ°©λ²μΌλ‘ μ€λ₯ μνκ° λ³κ²½λ κ²½μ°μλ§ μ€μ μμμ λ€μ λ λλ§ν©λλ€.
λΉμ μ λ£μ΄ μ½κ²μ΄ λ¬Έμ λ₯Ό μ¬ν ν μ TextField
λ΄μμ Table
λ‘ μ€μ selectable=true
. νΈμ§μ μμνκΈ° μν΄ ν
μ€νΈ νλλ₯Ό ν΄λ¦ ν λλ§λ€ λΌμΈμ μ΄μ μ΄ λ§μΆ° μ Έμ λ°°κ²½μμ΄ λ³κ²½λ©λλ€ (λΌμΈμ μΌλΆ props
κ° selected=true
λ‘ μ€μ λ μ μμ). λ€μ λ λλ§μ μ€ννλ©΄ μ΄μ μ μκ²λ©λλ€.
λ°λΌμ κΈ°λ³Έμ μΌλ‘ selectable
Table
λ΄μμ TextField
μ¬μ©ν μ μμ΅λλ€. μ΄μ¨λ μ’μ UX κ΄νμΈμ§ νμ€νμ§λ μμ§λ§ μ¬μ ν :)
μ°λ¦¬ νλ‘μ νΈμμ μ¬νμλ₯Ό λ°μ΄ λΌ μ μλ€λ κ²μ μκ²λμμ΅λλ€.
μ΄κ²μ λν ν΄κ²° λ°©λ²μ΄ μμ΅λκΉ? λν ν μ΄λΈ λ΄λΆμ μΌλ° μ λ ₯ ν μ€νΈ μμμ μ¬μ©ν λμ΄λ₯Ό μ μ μμ΅λλ€.
@ dalexander01 "μ루μ "μ μ°Ύμμ§λ§ md μ λ ₯ κ΅¬μ± μμλ₯Ό μ¬μ©νμ§ μμ λ λμΌν λ¬Έμ κ° λ°μνλ κ²κ³Ό κ°μ΄ λ§€μ° redux-form νΉμ μΌλ‘ 보μ λλ€. μ΄λ€ μ©λλ‘λ μ€ λν«μ κ²μ ν μ μμ΅λλ€!
@deyceg μ λ°, κ·Έκ²μ μμ²λ₯Ό μ€ μ μμ΅λλ€ π. <Dialog/>
λ° <TextField/>
μ‘°ν©μΌλ‘μ΄ λ¬Έμ κ° λ°μν©λλ€.
<Dialog
open={this.props.showDialog}
title={'New ' + this.props.type}
autoScrollBodyContent={true}
actions={actions}
bodyStyle={styles.dialogContent}
>
<SelectField
name='sub_type'
value={this.props.top_card.sub_type}
onChange={(e, k, payload) => this.props.topCardSelectChange('sub_type', payload)}
floatingLabelText='Type'
>
{menuItemsJSX}
</SelectField>
<TextField
name='title'
className='story-title'
value={this.props.top_card.title}
onChange={this.props.topCardChange}
floatingLabelText='Title'
fullWidth={true}
multiLine={true}
style={styles.title}
/>
<TextField />
</Dialog>
μ κ²½μ°λ₯Ό μν΄ ν΄κ²°νμ΅λλ€. ν΄λΉ ν
μ€νΈ νλμ κ³ μ ν IDλ₯Ό μ 곡ν΄μΌν©λλ€.
κ·Έλλ λ€μ λ λλ§ ν νμ IDλ₯Ό λ³κ²½ν΄μλ μλ©λλ€. μ΄λ° μμΌλ‘ Reactλ μ΄λ€ μμμ μ΄μ μ΄ λ§μΆ° μ‘λμ§ μΆμ ν μ μμ΅λλ€.
μΆμ : myArray.mapμ ν΅ν΄ λ λλ§λλ λ°°μ΄μ ν
μ€νΈ νλκ° μμμΌλ―λ‘ λ€μ λ λλ§ ν λ λμΌν ν€λ₯Ό μ 곡ν΄μΌν©λλ€.
νΈμ§ : λ€μ ν
μ€νΈνλλ° myArrayμ "ν€"κ° rerendersκ°μ λμΌνκ²λμ΄ λ¬Έμ κ° ν΄κ²°λμμ΅λλ€.
ν
μ€νΈ νλ IDκ° shortid.generate ()λ‘ λ³κ²½λμμ΅λλ€.
params.map(function(p,i){
return(
<div key={i}> <--- this will always be the same for this particular row.
<div className='param-inner'>
<TextField id={shortid.generate()} value = {p.value} onChange={this.updateParam.bind(this,i)}/> <-- id here can be random, but it is necessary to avoid browser warning "we don't have enough information..."
</div>
<div className='param-inner'>{p.unit}</div>
</div>
)
}.bind(this));
λꡬλ μ§μ΄ λ¬Έμ λ₯Ό ν΄κ²°ν μ μμμ΅λκΉ ( refs
λ₯Ό μ¬μ©νμ§ μκ³ )? onChange
μ value
propμ μ
λ ₯μ΄ μ΄μ μ μκ² λ§λλ μν ν€λ‘ μ€μ νλ μ‘°ν© μΈ κ² κ°μ΅λλ€.
λ€μκ³Ό κ°μ λ¬Έμ λ μμμ§λ§ λ΄λΆμ μΌλ‘ DropdownMenu https://github.com/callemall/material-ui/blob/ccf712c5733508784cd709c18c29059542d6aad1/src/SelectField/SelectFieldλ₯Ό νΈμΆνλ κ²½μ° SelectField ꡬνμ μ¬μ©νμ¬ ν΄κ²°νμ΅λλ€
λ°λΌμ λ΄λΆμ μΌλ‘ λ©λ΄μ κ΅¬μ± μμλ₯Ό λννλ DropDownMenuλ₯Ό μΆκ°ν΄μΌν©λλ€. DisableAutoFocusλ₯Ό μΆκ°νμ¬ TextFieldκ° λ€μκ³Ό κ°μ΄ ν¬μ»€μ€λ₯Ό μ μ§νλλ‘ν©λλ€.
SelectFieldμμ DropDownMenu κ΅¬μ± μμλ₯Ό λ ΈμΆνκ³ μλ μ΄μ μ μνμΌλ‘ λΉνμ±ν ν μ μμ΅λλ€.
μΌλΆ μν©μμλ μ μ© ν μμκ³ λ¬Έμ λ₯Ό μ κΈ° ν μ μμ§λ§ λ¬Έμ κ° λ°μν μ μμ§λ§ λ¬Έμ λ₯Ό ν΄κ²°νκΈ° μν΄ κ³ κ΅°λΆν¬νλ μ¬λλ€μμν ν κ°μ§ ν΄κ²° λ°©λ²μ μΈμ€ν΄μ€μμ λ³μλ₯Ό μ¬μ©νλ κ²μ
λλ€. κ΅κ°λ³΄λ€. κ·Έλμ λμ this.state.value
κ° λ κ²μ΄λ€ this.value
κ²μ onChange
λ κ² μ
λ°μ΄νΈ. κ΅¬μ± μμμλ value
μνμ΄ μμ΅λλ€. κ·Έλ° λ€μ onChange
νΈλ€λ¬μμ e.target.value
ν©λλ€.
μΈμ€ν΄μ€μ λ³μμ μνμ μ μΌν μ°¨μ΄μ μ μΈμ€ν΄μ€ varκ° λ€μ λ λλ§μ νΈλ¦¬κ±°νμ§ μλλ€λ κ²μ λλ€. λ€λ₯Έ μ΄μ κ°μμ μ μμ§λ§ λ€λ₯Έ μ¬λμ΄ μ΄κ²μ λν λ΄ μ¬μ λ₯Ό μ‘κΈ°λ₯Ό λ°λλλ€.
μ¬μ νμ΄ μ€λ₯κ° λ°μν©λλ€. ν΄κ²° λ°©λ²μ΄ μμ΅λκΉ?
λ΄κ° μ°Ύμ ν΄κ²° λ°©λ²μ shouldComponentUpdate ν¨μλ₯Ό λ΄ κ΅¬μ± μμλ‘ μ¬μ μ ν λ€μ ν μ€νΈ νλμμ μ¬μ©νλ μν κ°μ λ³κ²½νλ©΄ falseλ₯Ό λ°ννλ κ²μ λλ€.
`shouldComponentUpdate(nextProps, nextState) {
if(nextState.email != this.state.email) {
return false;
}
else if(nextState.password != this.state.password) {
return false;
}
else return true;
}
`
μ΄ λ°©λ²μΌλ‘ λ¬Έμ κ° ν΄κ²°λμμ΅λλ€. λ¬Έμ λ μνκ° λ³κ²½ λ λλ§λ€ κ΅¬μ± μμκ° λ λλ§λμ΄ μ΄μ μ μ¬μ€μ νλ κ² κ°μ΅λλ€. λ°λΌμ μμ ν¨μλ₯Ό μ¬μ©νμ¬ onChange μ΄λ²€νΈλ₯Ό μννμ¬ μν κ°μ μ€μ ν λ λ λλ§μ λΉνμ±ννλ©΄ κ΅¬μ± μμκ° λ€μλ‘λλμ§ μμ΅λλ€.
@ Aspintyl000 μ΄κ²μ μλν©λλ€ ... λ€μ. 'value'propμ ν΅ν΄ ν μ€νΈ νλμ κ°μ μ€μ νκ³ ν΄λΉ propμ 'this.state.value'λ‘ μ€μ νλ©΄ μ무κ²λ νμλμ§ μμ΅λλ€. λΉλ‘ λ΄κ° κ·Έκ²μ μ κ±°νλ©΄ μλνλ κ² κ°μ΅λλ€.
λλ ν μ΄λΈ νμμ ν μ€νΈ νλλ₯Ό μ¬μ©νκ³ μλλ° μ΄κ²μ΄ λ¬Έμ μ λλ€ :( μ§ν μν©μ΄ μμ΅λκΉ?
λλ λν κ°μ μ€λ₯κ° λ°μνμ΅λλ€. νμ§λ§ componentDidMount () {
this.refs.textField.focus ();
}
μ΄μ μ μμ§ μμ΅λλ€. κ·Έλ¬λ μ
λ ₯ κ°μ νμνμ§ μμ΅λλ€.
λλ μΆκ°νλ €κ³ <TextField />
Aμ <Table />
. μμ μν©κ³Ό λ§μ°¬κ°μ§λ‘ μ
λ ₯μ μ§μ€ν μ μμ΅λλ€.
λ΄ μ루μ
: onClick
μ΄λ²€νΈλ₯Όselectable=false
ν©λλ€. μ
λ ₯ μμ
ν onBlue
μ΄λ²€νΈλ₯Ό μ¬μ©νμ¬ ν
μ΄λΈμ selectable=true
λ₯Ό μ€μ ν©λλ€.
κ½€ λΆμΎν νλ.
μ€νμΌμ΄ μ§μ λ κ΅¬μ± μμλ‘ λ κ°μ μ λ ₯ μμλ₯Ό λν ν ν μ΄κ²μ κ²½ννμ΅λλ€. μΈλΆ divκ° λμμ μμ ν μ€λ¨νμ΅λλ€. μ΄κ²μμ΄ λΌμ΄λΈλ¬λ¦¬ λμμΈμ λμ°ν κ²°ν¨μ λλ€.
λ°λΌμ μ΄κ²μ λ§€μ° λμ°ν ν΄κ²° λ°©λ²μ΄μ§λ§ λ€μκ³Ό κ°μ΄ μλν©λλ€.
````
onSomeValueChanged = μ΄λ²€νΈ => {
this.props.someValueChanged (event.target.value);
const { target } = event;
setTimeout(() => {
target.focus();
}, 10);
};
````
μ, μμμ§ μμ΅λλ€ ...
@scotmatson "λ§€μ° λΆμΎν νλ ...μ΄ λΌμ΄λΈλ¬λ¦¬ λμμΈμ λμ°ν κ²°ν¨". μ΄κ²μ μμ λ΄μ¬μλ€μ΄ λ§λ λ¬΄λ£ μννΈμ¨μ΄μ
λλ€ ... styled-components
μ (κ³Ό)μ κ΄κ³λ₯Ό μ νμ
νμ΅λλ€.
@scotmatson μ μ΄λ μ κ²½μ°μλ λνΌλ‘ κ°μ§κ³ μλ Container = styled.div
λ₯Ό μΌλ°μ μΈ μ€νμΌμ΄ μ§μ λμ§ μμ κ΅¬μ± μμ div
λ°κΎΈλ©΄ λ¬Έμ κ° ν΄κ²°λμμμ νμΈν μ μμ΅λλ€.
νΈμ§νλ€:
κ·Έλ¦¬κ³ λλ λν λΉμ μ μ’μ κ°μ 곡μ ν©λλ€. μ΄ λ λΌμ΄λΈλ¬λ¦¬κ° μλ²½νκ² ν¨κ» μλνλ©΄ μ λ§ μ’μ κ²μ
λλ€. μ΄ λ¬Έμ μ νΉμ΄μ± λ¬Έμ λ μ‘°λ§κ° ν΄κ²°λκΈ°λ₯Ό λ°λΌλ λ κ°μ§μ΄μ§λ§ μκ°μ λ΄μ£Όμ λΆλ€κ» κ°μ¬λ립λλ€.
νΈμ§ 2 :
λ°©κΈ μ κ²½μ°μ λ¬Έμ μ μμΈμ λ°κ²¬νμ΅λλ€. render λ©μλμμ μ€νμΌ κ΅¬μ± μμλ₯Ό μ μΈνλ κ²μ
λλ€! μ΄λ‘ μΈν΄ μ»΄ν¬λνΈκ° λ€μ λ λλ§ λ λλ§λ€ λ€μ μμ±λκ³ Reactλ λ€μ λ λλ§ κ²½κ³μμ ν¬μ»€μ€κ°μλ μμλ₯Ό μΆμ ν μ μμμ΅λλ€. μ΄λ‘ μΈν΄ λͺ κ°μ§ λ€λ₯Έ λ€μ λ λλ§ λ¬Έμ κ° λ°μνμ΅λλ€.
λͺ¨λ μ€νμΌ κ΅¬μ± μμ μ μΈμ κ΅¬μ± μμ μΈλΆλ‘ μ΄λνλ©΄ ν¬μ»€μ€ μμ€ λ¬Έμ κ° ν΄κ²°λμμ΅λλ€. μλ§ λ©μ²ν μ€μ μΌ μ μμ§λ§ μ¬κΈ°μ μ무λ μΈκΈνμ§ μμκΈ° λλ¬Έμ λ€μ μμλ³΄κ³ ν κ²μ΄λΌκ³ μκ°νμ΅λλ€.
λ΄κ° κ°μ§ λ¬Έμ λ TextFields (λλ Input)κ° object.map () λ΄λΆμμ λ λλ§ λ λλ§λ€ ν¬μ»€μ€κ° λ§μ΄ μλ€λ κ²μ λλ€. μ§λ μΈλΆμ TextFieldκ° μλ²½νκ² μλν©λλ€. λ΄κ° λμΉ μνμ΄λ λ€λ₯Έ κ²μ΄ μμ΅λκΉ? λλ μμ ν κΈΈμ μμλ€
λλ μ΄ μμ΄μ΄ μ€λ λμμ μ μ λ κ±°μ λͺ¨λ μ루μ μ μλνμ΅λλ€.
λλ΅μ μΈ κ΅¬μ‘°λ μ΄μͺ½
λ©μΈ νμΌ
...
function Steps(props) {
const { steps } = props;
if(steps) {
return steps.map((step, index) => (
<div key={(step.order === '' ? index : step.order)}>
<NewUxCard step={step} index={index} onChange={props.onChange}
onChangeCard={props.onChangeCard} onParamChange={props.onParamChange}/>
</div>
));
}
}
<div>
<TextField/> //working
<Steps steps={this.props.ux.steps} onChange={this.onChange}
onChangeCard={this.handleChangeCard} onParamChange={this.handleParamChange} />
</div>
NewUxCard
...
<div>
<TextField type="text" fullWidth id={"qq"+this.props.index} label="Name"
value={this.props.step.name} onChange={this.props.onChangeCard('name', this.props.index)} margin="normal" /> //not working - loses focus on each key stroke
</div>
Redux-Reactλ₯Ό μ¬μ©νκ³ μμΌλ―λ‘ μν λ³κ²½μ input-> action-> reducerλ₯Ό ν΅ν΄ μ§νλ©λλ€.
μ΄λ€ μμ΄λμ΄? κ°μ¬
νΈμ§ 1 :
λ¬Έμ μ λν μΆκ° μ‘°μ¬λ₯Ό ν΅ν΄ νκ·Έλ₯Ό μμ±νλ λ° μ¬μ©λλ λ°μ ν¨μ Steps (props)λ₯Ό μ κ±°νμ¬ λ¬Έμ λ₯Ό μ’νκ³ ν΄κ²°νμ΅λλ€.
κ·Έλμ μ΄μ μ ꡬ쑰λ
@piltsen λ°©κΈ .map()
μμ TextFieldsλ₯Ό λ λλ§νλ λμ v1.5.0μμμ΄ λ¬Έμ κ° λ°μνμ΅λλ€-μ
λ ₯κ³Ό λμΌν κ°μΈ TextField ν€λ‘ λ²μλ₯Ό μ’νμΌλ―λ‘ λ³κ²½νμ λ TextFieldκ° λ§μ΄νΈ λ κ°λ₯μ±μ΄ μμ΅λλ€. λ€μ μ΄μ μ μμ΅λλ€. κ·Έκ² λμμ΄λλμ§ νμ€νμ§ μμ΅λλ€. μ§κΈ μ―€μ΄λ©΄ λΉμ μ΄ κ·Έκ²μ λΆλ₯νλ€κ³ νμ ν©λλ€
μ΄κ²μ λν λ λ μνμ μ¬μ©νλ μ¦μμ λλ€. κ°μ μΌμ
<HigherOrderComponent
render={hocProps => <TextField value={...} onChange={...} />
/>
μ΄ λμμ μΌμΌν¬ μ μμ΅λλ€. μμ νλ €λ©΄ μλμ μΌλ‘ νμ©λλ κ²½μ° λμ μ‘°κ°μ μ λ¬νμμμ€.
<HigherOrderComponentThatDoesntPassOwnState
component={<TextField {...this.props}/>}
/>
μ κ²½μ°μλ ν¬μ»€μ€κ° μμ€λμ§ μμμ§λ§ 컀μκ° TextFieldμμ μ¬λΌμ§λλ€. document.activeElementκ° λ΄ TextFieldμ κ°μμ§ νμΈν μ μκ³ ν€λ³΄λ λͺ λ Ήκ³Ό λ§μ°μ€ ν μ μ¬μ©νμ¬ κ° (μ ν λ²νΈ)μ λ³κ²½ν μ μμ§λ§ λͺ¨λ μ ν κ°μκΈ° μ€ν λ λλ§μ΄ λ°μνκ³ μ»€μκ° μμ€λ©λλ€.
κ·Έλ° λ€μ λ λλ§ μλ¨μμ IDλ‘ λ΄ TextFieldλ₯Ό κ²μνκ³
MyTextField.blur();
MyTextField.focus();
, λμμ΄λμ§ μμ΅λλ€. κ·Έλ¬λ timeoutκ³Ό ν¨κ» focus ()λ₯Ό λ§λ€λ©΄ μλνλ κ² κ°μ΅λλ€.
νΈμ§νλ€:
κΈμ, HOC λ΄λΆμμλ μ¬μ ν μλνμ§ μμΌλ―λ‘ μ΄μ¨λ λ°μ΄μΌ ν κ² κ°μ΅λλ€.
@ younes0 λλ κ·Έκ²μ className
λλ variant
μ κ°μ νλͺ©μ μ§μ ν νμκ° μμμ΅λλ€. TextField
λ₯Ό λ°λ³΅ν΄μ μμ νμ΅λλ€.
λ€μ μ΄ μ μμ΅λκΉ? μλλ©΄ μλ‘μ΄ λ¬Έμ λ₯Ό μ μΆν΄μΌν©λκΉ?
μ¬μ νμ΄ λ¬Έμ κ° λ°μν©λλ€. 3.2.0μ μ¬μ©νκ³ μμ΅λλ€.
@OmarDavilaP 볡μ λ‘ μλ‘μ΄ λ¬Έμ λ₯Ό λ§λ€ μ μμ΅λκΉ?
μ κ²½μ°λ₯Ό μν΄ ν΄κ²°νμ΅λλ€. ν΄λΉ ν μ€νΈ νλμ κ³ μ ν IDλ₯Ό μ 곡ν΄μΌν©λλ€.
...
κ·Έλλ λ€μ λ λλ§ ν νμ IDλ₯Ό λ³κ²½ν΄μλ μλ©λλ€. μ΄λ° μμΌλ‘ Reactλ μ΄λ€ μμμ μ΄μ μ΄ λ§μΆ° μ‘λμ§ μΆμ ν μ μμ΅λλ€.
μΆμ : myArray.mapμ ν΅ν΄ λ λλ§λλ λ°°μ΄μ ν μ€νΈ νλκ° μμμΌλ―λ‘ λ€μ λ λλ§ ν λ λμΌν ν€λ₯Ό μ 곡ν΄μΌν©λλ€.νΈμ§ : λ€μ ν μ€νΈνλλ° myArrayμ "ν€"κ° rerendersκ°μ λμΌνκ²λμ΄ λ¬Έμ κ° ν΄κ²°λμμ΅λλ€.
ν μ€νΈ νλ IDκ° shortid.generate ()λ‘ λ³κ²½λμμ΅λλ€.params.map(function(p,i){ return( <div key={i}> <--- this will always be the same for this particular row. <div className='param-inner'> <TextField id={shortid.generate()} value = {p.value} onChange={this.updateParam.bind(this,i)}/> <-- id here can be random, but it is necessary to avoid browser warning "we don't have enough information..." </div> <div className='param-inner'>{p.unit}</div> </div> ) }.bind(this));
λ€, μ κ²½μ°μλ κΈ°λ³Έμ μΌλ‘ λ€μμ μ¬μ©νμ΅λλ€.
<NewTextField key={user.id+Math.random()}>
λλ κ·Έκ²μ λ€μμΌλ‘ λ체νμ΅λλ€.
<NewTextField key={user.id}>
λ°λΌμ κ΅¬μ± μμλ₯Ό λ€μ λ λλ§ ν λλ§λ€ μμμ ν€λ₯Ό μμ±νλ κ²μ λμ μ΅κ΄ μΈ κ² κ°μ΅λλ€.
λμκ² λ¬Έμ λ TextFieldμ λν λνΌ ν¨μλ₯Ό ββλ§λ€μμ§ λ§ λ΄ κ΅¬μ± μμ ν¨μ λ΄μμ ν΄λΉ ν¨μλ₯Ό μ μΈ ν ν λ΄ ν¨μ μΈλΆλ‘ μ΄λνλ©΄ λͺ¨λ κ²μ΄ μμλλ‘ μλνμ΅λλ€!
sendbox μν https://codesandbox.io/s/material-demo-msbxl?fontsize=14&hidenavigation=1&theme=darkλ₯Ό λ§λ€μμ΅λλ€.
μ‘°κ±΄λΆ λ λλ§μμ΄ λ¬Έμ κ° μμ΅λλ€. .js νμΌμ λ€μν κ΅¬μ± μμλ₯Ό λ°ννλ javascript κ°μ²΄κ° λ λλ§μ μμ΅λλ€. λλ κ·Έκ²μ μ ννκ² μ€λͺ νκ³ μμ§ μλ€. μ£μ‘ν©λλ€. λ΄κ° κ·Έκ²μ κ³ μΉ λ λ΄κ° κΈ°μ΅νλ€λ©΄ λλμ΄ ν¬μ€νΈλ₯Ό νΈμ§ ν κ²μ΄λ€.
νΈμ§ : μμ΄, λλ κ·Έκ²μ κ³ μ³€λ€! μ‘°κ±΄λΆ λ λλ§ λ°©μμ κ° κ΅¬μ± μμκ° νμλμ§ μμλλΌλ λ λλ§νλ κ²μ΄λΌκ³ μκ°ν©λλ€. λ‘μ§μ λ λλ§ μΈλΆλ‘ μ΄λνλλ° μ΄μ μ λλ‘ μλνλ κ² κ°μ΅λλ€. λ€μμ μ΄μ μ½λμ λλ€.
νΈμ§ : λλ μ΄κ²μ μ€νμΌλ§μ ν μ μμΌλ―λ‘ μ κ²½ μ°μ§ λ§μμμ€.
λλ μ€λμ΄ λ¬Έμ λ₯Ό λ§λ¬κ³ λͺ μκ° λμ 머리λ₯Ό λλλ Έλ€. μ κ²½μ°μλ νμ΄μ§λ₯Ό λ μ ꡬμ±νκΈ° μν΄ TextField
λ₯Ό μν λΉ μ μ₯ κ΅¬μ± μμλ‘ λννλ κ²μ΄μμ§λ§ (λ°μ΄ν°κ°λ‘λλλ κ²½μ° μΌλΆλ₯Ό λ λλ§νμ§ λ§μμμ€ λ±) useState
λ¨κ²Όμ΅λλ€. μμ κ΅¬μ± μμμμ TextField
λ₯Ό μ μ΄ ν useState
μ½λ°±μ
λλ€.
νμμ μν΄ λ΄ μ΄λ¦¬ μμμ μ¬ννκΈ°μν μμ μ½λ μλ λ°μ€ λ§ν¬κ° μμ΅λλ€ : https://codesandbox.io/s/mui-textedit-losefocus-g6xxb
μ΄μ λ¬Έμ λ TextField
λννλ μ¬μ©μ μ μ κ΅¬μ± μμλ₯Ό μ΄λ»κ² λ§λ€ μ μμ΅λκΉ? HOCμ createElement
λͺ¨λμ΄ λ²κ·Έμμ λ°μνλ κ² κ°μ΅λλ€.
const MyField= ({ name, ...props }) => (
<TextField
fullWidth
variant="outlined"
size="small"
name={name}
{...props}
/>
);
const MyField= ({ name, ...rest }) => {
return React.createElement(TextField, {
fullWidth: true,
variant: "outlined",
size: "small",
name: name,
{...rest}
});
};
μμ μ κ·Ό λ°©μμ μ μλν©λλ€. λ¬Έμ λ₯Ό μΌμΌν¨ μμ κ΅¬μ± μμ λ΄λΆμ μ¬μ©μ μ μ κ΅¬μ± μμκ° μ μλμ΄ μμμ κΉ¨λ¬μμ΅λλ€. λΆλͺ¨ λ²μ μΈλΆλ‘ μ΄λνλ©΄ μ μμ μΌλ‘ μλν©λλ€. μ¬λ°λ₯Έ μ κ·Ό λ°©μμ 보μ¬μ£ΌκΈ° μν΄ μ΄μ μλ λ°μ€λ₯Ό μ λ°μ΄νΈνμ΅λλ€. https://codesandbox.io/s/mui-textedit-losefocus-g6xxb
λμκ² λ¬Έμ λ TextFieldμ λν λνΌ ν¨μλ₯Ό ββλ§λ€μμ§ λ§ λ΄ κ΅¬μ± μμ ν¨μ λ΄μμ ν΄λΉ ν¨μλ₯Ό μ μΈ ν ν λ΄ ν¨μ μΈλΆλ‘ μ΄λνλ©΄ λͺ¨λ κ²μ΄ μμλλ‘ μλνμ΅λλ€!
sendbox μν https://codesandbox.io/s/material-demo-msbxl?fontsize=14&hidenavigation=1&theme=darkλ₯Ό λ§λ€μμ΅λλ€.
μ΄κ²μ λ΄ λ¬Έμ μμ΅λλ€. κ°μ¬ν©λλ€!
μμ μ κ·Ό λ°©μμ μ μλν©λλ€. λ¬Έμ λ₯Ό μΌμΌν¨ μμ κ΅¬μ± μμ λ΄λΆμ μ¬μ©μ μ μ κ΅¬μ± μμκ° μ μλμ΄ μμμ κΉ¨λ¬μμ΅λλ€. λΆλͺ¨ λ²μ μΈλΆλ‘ μ΄λνλ©΄ μ μμ μΌλ‘ μλν©λλ€. μ¬λ°λ₯Έ μ κ·Ό λ°©μμ 보μ¬μ£ΌκΈ° μν΄ μ΄μ μλ λ°μ€λ₯Ό μ λ°μ΄νΈνμ΅λλ€. https://codesandbox.io/s/mui-textedit-losefocus-g6xxb
κ°μ¬ν©λλ€. μ΄κ²μ ν¨κ³Όκ° μμλ€!
λμκ² λ¬Έμ λ TextFieldμ λν λνΌ ν¨μλ₯Ό ββλ§λ€μμ§ λ§ λ΄ κ΅¬μ± μμ ν¨μ λ΄μμ ν΄λΉ ν¨μλ₯Ό μ μΈ ν ν λ΄ ν¨μ μΈλΆλ‘ μ΄λνλ©΄ λͺ¨λ κ²μ΄ μμλλ‘ μλνμ΅λλ€!
sendbox μν https://codesandbox.io/s/material-demo-msbxl?fontsize=14&hidenavigation=1&theme=darkλ₯Ό λ§λ€μμ΅λλ€.
@ fleischman718 μ΄κ²μ μμ
μλ λ°μ€μμ λ¬΄μ¨ μΌμ΄ λ²μ΄μ§κ³ μλμ§ νμ νλ λ° 1 μ΄κ° κ±Έλ ΈμΌλ―λ‘ μλμ μμ½μ μμ±νμ΅λλ€.
import { TextField } from '@material-ui/core';
const ParentComponent = () => {
// DON'T DO THIS!!!
// fix issue by moving this component definition outside of the ParentComponent
// or assign the TextField to a variable instead
const TextFieldWrapper = () => (
<TextField />
);
return (
<div>
<TextFieldWrapper />
</div>
)
}
κ°μ₯ μ μ©ν λκΈ
@scotmatson μ μ΄λ μ κ²½μ°μλ λνΌλ‘ κ°μ§κ³ μλ
Container = styled.div
λ₯Ό μΌλ°μ μΈ μ€νμΌμ΄ μ§μ λμ§ μμ κ΅¬μ± μμdiv
λ°κΎΈλ©΄ λ¬Έμ κ° ν΄κ²°λμμμ νμΈν μ μμ΅λλ€.νΈμ§νλ€:
κ·Έλ¦¬κ³ λλ λν λΉμ μ μ’μ κ°μ 곡μ ν©λλ€. μ΄ λ λΌμ΄λΈλ¬λ¦¬κ° μλ²½νκ² ν¨κ» μλνλ©΄ μ λ§ μ’μ κ²μ λλ€. μ΄ λ¬Έμ μ νΉμ΄μ± λ¬Έμ λ μ‘°λ§κ° ν΄κ²°λκΈ°λ₯Ό λ°λΌλ λ κ°μ§μ΄μ§λ§ μκ°μ λ΄μ£Όμ λΆλ€κ» κ°μ¬λ립λλ€.
νΈμ§ 2 :
λ°©κΈ μ κ²½μ°μ λ¬Έμ μ μμΈμ λ°κ²¬νμ΅λλ€. render λ©μλμμ μ€νμΌ κ΅¬μ± μμλ₯Ό μ μΈνλ κ²μ λλ€! μ΄λ‘ μΈν΄ μ»΄ν¬λνΈκ° λ€μ λ λλ§ λ λλ§λ€ λ€μ μμ±λκ³ Reactλ λ€μ λ λλ§ κ²½κ³μμ ν¬μ»€μ€κ°μλ μμλ₯Ό μΆμ ν μ μμμ΅λλ€. μ΄λ‘ μΈν΄ λͺ κ°μ§ λ€λ₯Έ λ€μ λ λλ§ λ¬Έμ κ° λ°μνμ΅λλ€.
λͺ¨λ μ€νμΌ κ΅¬μ± μμ μ μΈμ κ΅¬μ± μμ μΈλΆλ‘ μ΄λνλ©΄ ν¬μ»€μ€ μμ€ λ¬Έμ κ° ν΄κ²°λμμ΅λλ€. μλ§ λ©μ²ν μ€μ μΌ μ μμ§λ§ μ¬κΈ°μ μ무λ μΈκΈνμ§ μμκΈ° λλ¬Έμ λ€μ μμλ³΄κ³ ν κ²μ΄λΌκ³ μκ°νμ΅λλ€.