Я пытаюсь создать простую форму с помощью response, но сталкиваюсь с трудностями при правильной привязке данных к defaultValue формы.
Я ищу следующее поведение:
- Когда я открываю свою страницу, поле ввода текста должно быть заполнено текстом моего сообщения AwayMessage в моей базе данных. Это «Образец текста»
- В идеале я хочу иметь заполнитель в поле ввода текста, если AwayMessage в моей базе данных не имеет текста.
Однако прямо сейчас я обнаруживаю, что поле ввода текста пусто каждый раз, когда я обновляю страницу. (Хотя то, что я ввожу во ввод, действительно сохраняется и сохраняется.) Я думаю, это потому, что html текстового поля ввода загружается, когда AwayMessage является пустым объектом, но не обновляется при загрузке awayMessage. Кроме того, я не могу указать значение по умолчанию для поля.
Я удалил часть кода для ясности (например, onToggleChange)
window.Pages ||= {}
Pages.AwayMessages = React.createClass
getInitialState: ->
App.API.fetchAwayMessage (data) =>
@setState awayMessage:data.away_message
{awayMessage: {}}
onTextChange: (event) ->
console.log "VALUE", event.target.value
onSubmit: (e) ->
window.a = @
e.preventDefault()
awayMessage = {}
awayMessage["master_toggle"]=@refs["master_toggle"].getDOMNode().checked
console.log "value of text", @refs["text"].getDOMNode().value
awayMessage["text"]=@refs["text"].getDOMNode().value
@awayMessage(awayMessage)
awayMessage: (awayMessage)->
console.log "I'm saving", awayMessage
App.API.saveAwayMessage awayMessage, (data) =>
if data.status == 'ok'
App.modal.closeModal()
notificationActions.notify("Away Message saved.")
@setState awayMessage:awayMessage
render: ->
console.log "AWAY_MESSAGE", this.state.awayMessage
awayMessageText = if this.state.awayMessage then this.state.awayMessage.text else "Placeholder Text"
`<div className="away-messages">
<div className="header">
<h4>Away Messages</h4>
</div>
<div className="content">
<div className="input-group">
<label for="master_toggle">On?</label>
<input ref="master_toggle" type="checkbox" onChange={this.onToggleChange} defaultChecked={this.state.awayMessage.master_toggle} />
</div>
<div className="input-group">
<label for="text">Text</label>
<input ref="text" onChange={this.onTextChange} defaultValue={awayMessageText} />
</div>
</div>
<div className="footer">
<button className="button2" onClick={this.close}>Close</button>
<button className="button1" onClick={this.onSubmit}>Save</button>
</div>
</div>
мой console.log для AwayMessage показывает следующее:
AWAY_MESSAGE Object {}
AWAY_MESSAGE Object {id: 1, company_id: 1, text: "Sample Text", master_toggle: false}
javascript
forms
reactjs
coffeescript
2-way-object-databinding
Нихарика Бхартия
источник
источник
Другой способ исправить это - изменить
keyвходные данные.<input ref="text" key={this.state.awayMessage ? 'notLoadedYet' : 'loaded'} onChange={this.onTextChange} defaultValue={awayMessageText} />Обновление: так как это дает положительные голоса, я должен сказать, что вы должны правильно использовать
disabledилиreadonlyопору во время загрузки контента, чтобы вы не уменьшали опыт ux.И да, скорее всего, это взлом, но он выполняет свою работу .. ;-)
источник
selectсkeyтакdefaultValueчто на самом делеvalue.keyввода - это ключ к отражению нового значения во вводе. Яtype="text"успешно использовал его .Возможно, это не лучшее решение, но я бы сделал компонент, как показано ниже, чтобы я мог повторно использовать его везде в своем коде. Я бы хотел, чтобы он уже был включен по умолчанию.
<MagicInput type="text" binding={[this, 'awayMessage.text']} />Компонент может выглядеть так:
window.MagicInput = React.createClass onChange: (e) -> state = @props.binding[0].state changeByArray state, @path(), e.target.value @props.binding[0].setState state path: -> @props.binding[1].split('.') getValue: -> value = @props.binding[0].state path = @path() i = 0 while i < path.length value = value[path[i]] i++ value render: -> type = if @props.type then @props.type else 'input' parent_state = @props.binding[0] `<input type={type} onChange={this.onChange} value={this.getValue()} />`Где изменение по массиву - это функция, обращающаяся к хешу по пути, выраженному массивом
changeByArray = (hash, array, newValue, idx) -> idx = if _.isUndefined(idx) then 0 else idx if idx == array.length - 1 hash[array[idx]] = newValue else changeByArray hash[array[idx]], array, newValue, ++idxисточник
Самый надежный способ установить начальные значения - использовать componentDidMount () {} в дополнение к render () {}:
... componentDidMount(){ const {nameFirst, nameSecond, checkedStatus} = this.props; document.querySelector('.nameFirst').value = nameFirst; document.querySelector('.nameSecond').value = nameSecond; document.querySelector('.checkedStatus').checked = checkedStatus; return; } ...Вы можете легко уничтожить элемент и заменить его новым с помощью
<input defaultValue={this.props.name}/>как это:
if(document.querySelector("#myParentElement")){ ReactDOM.unmountComponentAtNode(document.querySelector("#myParentElement")); ReactDOM.render( <MyComponent name={name} />, document.querySelector("#myParentElement") ); };Вы также можете использовать эту версию метода размонтирования:
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);источник
Придайте значение параметру «placeHolder». Например :-
<input type="text" placeHolder="Search product name." style={{border:'1px solid #c5c5c5', padding:font*0.005,cursor:'text'}} value={this.state.productSearchText} onChange={this.handleChangeProductSearchText} />источник