Material-ui: [TextField]κ°€ λ‹€μ‹œ λ Œλ”λ§μ— μ§‘μ€‘ν•˜μ§€ λͺ»ν•¨

에 λ§Œλ“  2015λ…„ 06μ›” 08일  Β·  41μ½”λ©˜νŠΈ  Β·  좜처: mui-org/material-ui

ν¬μ»€μŠ€κ°€μžˆλŠ” ν…μŠ€νŠΈ ν•„λ“œκ°€ setState μ˜ν•΄ λ‹€μ‹œ λ Œλ”λ§λ˜λ©΄ 포컀슀λ₯Ό μžƒμŠ΅λ‹ˆλ‹€.

question v0.x

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

@scotmatson 적어도 제 κ²½μš°μ—λŠ” 래퍼둜 κ°€μ§€κ³ μžˆλŠ” Container = styled.div λ₯Ό 일반적인 μŠ€νƒ€μΌμ΄ μ§€μ •λ˜μ§€ μ•Šμ€ ꡬ성 μš”μ†Œ div λ°”κΎΈλ©΄ λ¬Έμ œκ°€ ν•΄κ²°λ˜μ—ˆμŒμ„ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

νŽΈμ§‘ν•˜λ‹€:
그리고 λ‚˜λŠ” λ˜ν•œ λ‹Ήμ‹ μ˜ μ’Œμ ˆκ°μ„ κ³΅μœ ν•©λ‹ˆλ‹€. 이 두 λΌμ΄λΈŒλŸ¬λ¦¬κ°€ μ™„λ²½ν•˜κ²Œ ν•¨κ»˜ μž‘λ™ν•˜λ©΄ 정말 쒋을 κ²ƒμž…λ‹ˆλ‹€. 이 λ¬Έμ œμ™€ νŠΉμ΄μ„± 문제 λŠ” μ‘°λ§Œκ°„ ν•΄κ²°λ˜κΈ°λ₯Ό λ°”λΌλŠ” 두 κ°€μ§€μ΄μ§€λ§Œ μ‹œκ°„μ„ λ‚΄μ£Όμ‹  λΆ„λ“€κ»˜ κ°μ‚¬λ“œλ¦½λ‹ˆλ‹€.

νŽΈμ§‘ 2 :
방금 제 κ²½μš°μ— 문제의 원인을 λ°œκ²¬ν–ˆμŠ΅λ‹ˆλ‹€. render λ©”μ„œλ“œμ—μ„œ μŠ€νƒ€μΌ ꡬ성 μš”μ†Œλ₯Ό μ„ μ–Έν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€! 이둜 인해 μ»΄ν¬λ„ŒνŠΈκ°€ λ‹€μ‹œ λ Œλ”λ§ 될 λ•Œλ§ˆλ‹€ λ‹€μ‹œ μƒμ„±λ˜κ³  ReactλŠ” λ‹€μ‹œ λ Œλ”λ§ κ²½κ³„μ—μ„œ ν¬μ»€μŠ€κ°€μžˆλŠ” μš”μ†Œλ₯Ό 좔적 ν•  수 μ—†μ—ˆμŠ΅λ‹ˆλ‹€. 이둜 인해 λͺ‡ 가지 λ‹€λ₯Έ λ‹€μ‹œ λ Œλ”λ§ λ¬Έμ œκ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€.

λͺ¨λ“  μŠ€νƒ€μΌ ꡬ성 μš”μ†Œ 선언을 ꡬ성 μš”μ†Œ μ™ΈλΆ€λ‘œ μ΄λ™ν•˜λ©΄ 포컀슀 손싀 λ¬Έμ œκ°€ ν•΄κ²°λ˜μ—ˆμŠ΅λ‹ˆλ‹€. μ•„λ§ˆ λ©μ²­ν•œ μ‹€μˆ˜ 일 수 μžˆμ§€λ§Œ 여기에 아무도 μ–ΈκΈ‰ν•˜μ§€ μ•Šμ•˜κΈ° λ•Œλ¬Έμ— λ‹€μ‹œ μ™€μ„œλ³΄κ³  ν•  것이라고 μƒκ°ν–ˆμŠ΅λ‹ˆλ‹€.

λͺ¨λ“  41 λŒ“κΈ€

+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κ°€ 포컀슀λ₯Ό μœ μ§€ν•˜λŠ” 것을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

4uo63bzhmj

λ‚˜λŠ” 아직도 이것을 μ–»λŠ”λ‹€. @ 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 ꡬ성 μš”μ†Œλ₯Ό λ…ΈμΆœν•˜κ³  μžλ™ μ΄ˆμ μ„ μ†Œν’ˆμœΌλ‘œ λΉ„ν™œμ„±ν™” ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

out

일뢀 μƒν™©μ—μ„œλŠ” 적용 ν•  μˆ˜μ—†κ³  문제λ₯Ό 제기 ν•  수 μžˆμ§€λ§Œ λ¬Έμ œκ°€ λ°œμƒν•  수 μžˆμ§€λ§Œ 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ κ³ κ΅°λΆ„νˆ¬ν•˜λŠ” μ‚¬λžŒλ“€μ„μœ„ν•œ ν•œ 가지 ν•΄κ²° 방법은 μΈμŠ€ν„΄μŠ€μ—μ„œ λ³€μˆ˜λ₯Ό μ‚¬μš©ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. ꡭ가보닀. κ·Έλž˜μ„œ λŒ€μ‹  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'둜 μ„€μ •ν•˜λ©΄ 아무것도 ν‘œμ‹œλ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. 비둝 λ‚΄κ°€ 그것을 μ œκ±°ν•˜λ©΄ μž‘λ™ν•˜λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€.

λ‚˜λŠ” ν…Œμ΄λΈ” ν–‰μ—μ„œ ν…μŠ€νŠΈ ν•„λ“œλ₯Ό μ‚¬μš©ν•˜κ³  μžˆλŠ”λ° 이것이 λ¬Έμ œμž…λ‹ˆλ‹€ :( 진행 상황이 μžˆμŠ΅λ‹ˆκΉŒ?

Psid.txt

λ‚˜λŠ” λ˜ν•œ 같은 였λ₯˜κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ 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)λ₯Ό μ œκ±°ν•˜μ—¬ 문제λ₯Ό 쒁히고 ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€.(이 경우).

κ·Έλž˜μ„œ 이전에 κ΅¬μ‘°λŠ”-> κΈ°λŠ₯ 단계 (props)-> 맀핑 클래슀. κ·Έλž˜μ„œ 이제 ν•¨μˆ˜ (μ€‘κ°„μž)λ₯Ό μ œκ±°ν•˜κ³  Const Steps-> Mapping Class 만 μ œκ±°ν–ˆμŠ΅λ‹ˆλ‹€.. λ‚˜λŠ” 이것이 μ™œ μž‘λ™ν•˜λŠ”μ§€ (μ•„λ§ˆλ„ 일뢀 μ†Œν’ˆμ΄ λ¬΄μ‹œλ˜κ³  있음) μΆ”μΈ‘ ν•  μˆ˜λŠ” μžˆμ§€λ§Œ λ‚΄ 사건을 ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€.

@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>
  )
}
이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰