Javascript — React JS Изменить текстовое значение и отправить

Question

Javascript — React JS Изменить текстовое значение и отправить

Обнаружена ошибка: сбой propType: вы указали value опора для поля формы без onChange обработчик. Это сделает поле только для чтения. Если поле должно быть изменяемым, используйте defaultValue, В противном случае установите либо onChange или же readOnly, Проверьте метод визуализации BasicInputBox,

Я возвращаю следующий компонент:

<BasicInputBox label="Student Name :" valChange={this.nameChange} value={datafield.name}/>

и компонент:

var BasicInputBox = React.createClass({
render: function() {
return <div>
<tr>
<td><label> { this.props.label } </label></td>
<td><input type="text" onChange={ this.props.valChange } value={ this.props.value } /></td>
</tr>
</div>
}
});

Значение не изменяется при изменении в текстовом поле.
И следующее является функцией nameChange функция

0

javascript php reactjs

Решение

По вопросам рекламы [email protected]

Accepted Answer

Кажется, ваш код работает нормально, при условии, что части, которыми вы не поделились, работают правильно.

Если у вас возникли проблемы, это, вероятно, в слушателе или в рендере родительского компонента. Вот рабочий пример с вашим элементом (примечание: я немного изменил структуру, чтобы обеспечить легальный HTML):

var BasicInputBox = React.createClass({
render: function() {
return <div>
<label> { this.props.label } </label>
<input type="text" onChange={ this.props.valChange } value={ this.props.value } />
</div>
}
});
var Wrapper = React.createClass({
getInitialState: function() {
return {
datafield: {
name: ''
}
}
},
nameChange: function(e) {

this.setState({datafield: {name: e.currentTarget.value}})

},
render: function() {
let datafield = this.state.datafield
return <BasicInputBox label="Student Name :" valChange={this.nameChange} value={datafield.name}/>
}
})

Рабочий фрагмент (некрасиво после перевода babel / jsx).

"use strict";

var BasicInputBox = React.createClass({
displayName: "BasicInputBox",

render: function render() {
return React.createElement(
"div",
null,
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
React.createElement(
"label",
null,
" ",
this.props.label,
" ")
),
React.createElement(
"td",
null,
React.createElement("input", { type: "text", onChange: this.props.valChange, value: this.props.value })
)
)
);
}
});
var Wrapper = React.createClass({
displayName: "Wrapper",

getInitialState: function getInitialState() {
return {
datafield: {
name: ''
}
};
},
nameChange: function nameChange(e) {
this.setState({ datafield: { name: e.currentTarget.value } });
},
render: function render() {
var datafield = this.state.datafield;
return React.createElement(BasicInputBox, { label: "Student Name :", valChange: this.nameChange, value: datafield.name });
}
});

ReactDOM.render(React.createElement(Wrapper, null), document.getElementById('app'));

<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
<div id="app"></div>

1

Другие решения

Других решений пока нет …

Источник