React - 在存儲和顯示時使用不同格式的2路綁定文本輸入

Question

我想要一個與我在後端具有的值列表同步的文本輸入列表。因此，在它們中輸入更新值，並更新這些值反映在文本輸入中。

這是這樣的一個典型的2路綁定情況：

class BoundInput extends Component { 

    constructor(props) { 
     super(props); 
     this.state = {textVal: ''}; 
    } 

    handleChange = evt => this.setState({textVal: evt.target.value}); 

    render() { 
     return <input type="text" 
         value={this.state.textVal} 
         onChange={this.handleChange} /> 
    } 

} 

但我想用來存儲用戶輸入沒有什麼價值，但，比如，從釐米轉換。到英寸

不幸的是，轉換，然後轉換回來並不完美。

E.g.打字'2.'立即被轉換回'2'，所以如果你想輸入一個十進制和其他任何東西，你會被卡住。

我想能夠具有所存儲的值來更新所述輸入顯示除非輸入是活動的，在這種情況下它應該只從輸入更新存儲值。

所以我有一個布爾值，讓我在value有條件地傳遞到文本輸入的，所以類型確定可以輸入入無人之境，顯示可以更新到的等價表示只有一次，他們離開焦點（例如'1.'突然變得'1'或'1.0' ），這很好。

我試過這個，但是我得到一個輸入組件在整個生命週期內必須被控制或失控的錯誤。沒有像我那樣改變它。

關於整體策略的任何建議，或繞過這個關於控制與不受控制的特別警告？

也許一種方法來殺死和重新安裝輸入組件之前，從value通過value不通過？

我做的這件事很難看，因爲所有這些都只是重複我的輸入組件（我稱之爲NiceInput），而當它不活動時，我交換重複的NiceInput2。這樣做很有效，但必須比複製組件的方式更加荒謬：D

Answer 1

您可以在不斷地「makeNice」文本值的狀態下存儲第二個變量，並在取消選擇時將nice值賦給可見的文本值。

你還在用「onDeselect」，但你省卻了第2個分量

class BoundInput extends Component { 

    constructor(props) { 
     super(props); 
     this.state = {textVal: '', niceVal: ''}; 
    } 

    handleChange = evt => { 
     this.setState({ 
      textVal: evt.target.value, 
      niceVal: makeNice(evt.target.value), 
     });  
    } 

    handleDeselect =() => {this.setState({textVal: this.state.niceVal});} 

    render() { 
     return <input type="text" 
         value={this.state.textVal} 
         onChange={this.handleChange} 
         onDeselect={this.handleDeselect} 
       /> 
    } 

} 

Answer 2

我最終什麼事做的是創造一個UncontrolledInput分量的道具其餘轉發之前去除道具valueinput。

const UncontrolledInput = ({ value, ...otherProps }) => { 
    return (
    <input {...otherProps} /> 
) 
} 

和我呈現的UncontrolledComponent代替我的正常輸入組件當用戶打字進去。

因此，存儲值正在通過鍵入進行更新，但鍵入時除了用戶的按鍵輸入外，沒有其他輸入元素的值正在寫入。

但我的最終版本是這樣的：

const UncontrolledInput = ({ value, focusOnMount, ...otherProps }) => { 
    otherProps.defaultValue = value; 
    if (focusOnMount) { 
    otherProps.ref = input => input && input.focus(); 
    } 
    return (
    <input {...otherProps} /> 
) 
} 

的2個重要的補充：

1）至少開始與父試了一下輸入的值在

2傳）一個選項，用於在輸入裝入後重點輸入（因爲用這個不受控制的等價物替換輸入可能發生在你想要輸入被聚焦的時候，但是這個組件替換使得它不能進行重點初始化

1）defaultValue

2）refsee this question/answer about focusing on mount

：LLY）

我與實現這些