![](/img/trans.png)
[英]how to make the json schema flexible enough to handle case sensitive input for enum?
[英]How to make <input> value flexible
我有兩個ReactJS組件,第一個組件將顯示一個網格。 單擊一行時,它將使用Name填充2組件。
但是當我嘗試編輯輸入框時,它無法更改。 ReactJS處理這個問題的正確方法是什么。
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = { formName : ''}
this.handleFormName = this.handleFormName.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleFormName(e) {
console.log(e.target.value);
this.setState({ formName: e.target.value });
}
handleSubmit(event) {
console.log(this.state.formName);
axios.post(this.props.UrlPost, { FirstName: this.state.formName })
.then(function (response) {
});
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.props.Name} onChange={this.handleFormName} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
class ComponentWithGriddle extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedRowId: 0,
};
}
onRowClick(row) {
console.log(row.props.data.name);
this.setState({ selectedRowId: row.props.data.id });
this.props.handleNameChange(row.props.data.name);
}
render() {
var rowMetadata = {bodyCssClassName: rowData => (rowData.id === this.state.selectedRowId ? "selected" : '')};
//console.log(rowMetadata);
return (
<Griddle results={fakeData} onRowClick={this.onRowClick.bind(this)} columnMetadata={columnMeta} useFixedHeader={true} rowMetadata={rowMetadata} useGriddleStyles={true} />
);
}
}
class RootFrame extends React.Component {
constructor(props) {
super(props);
this.handleNameChange = this.handleNameChange.bind(this);
this.state = { Name: '' };
}
handleNameChange(name)
{
this.setState({ Name: name });
}
render() {
return (
<div>
<ComponentWithGriddle Name={this.state.Name} handleNameChange={this.handleNameChange} />
<NameForm UrlPost={this.props.UrlPost} Name={this.state.Name}/>
</div>
);
};
}
var emptyData = [];
var columnMeta = [
{
"columnName": "id",
"order": 1,
"locked": false,
"visible": true,
"displayName": "ID"
},
{
"columnName": "name",
"order": 2,
"locked": false,
"visible": true,
"displayName": "Name"
},
{
"columnName": "city",
"order": 3,
"locked": false,
"visible": true
},
{
"columnName": "state",
"order": 4,
"locked": false,
"visible": true
},
{
"columnName": "country",
"order": 5,
"locked": false,
"visible": true
},
{
"columnName": "company",
"order": 6,
"locked": false,
"visible": true
},
{
"columnName": "favoriteNumber",
"order": 7,
"locked": false,
"visible": true,
"displayName": "Favorite Number"
}
];
var rowMeta =
{
"key": "id"
};
var propertyGridMeta = [
{
"columnName": "property",
"order": 1,
"locked": false,
"visible": true,
"cssClassName": "properties-name",
"displayName": "Property"
},
{
"columnName": "description",
"order": 2,
"locked": false,
"visible": true,
"cssClassName": "properties-description",
"displayName": "Description"
},
{
"columnName": "type",
"order": 3,
"locked": false,
"visible": true,
"cssClassName": "properties-type",
"displayName": "Type"
},
{
"columnName": "default",
"order": 4,
"locked": false,
"visible": true,
"cssClassName": "properties-default",
"displayName": "Default"
}
]
var fakeData = [
{
"id": 0,
"name": "Mayer Leonard",
"city": "Kapowsin",
"state": "Hawaii",
"country": "United Kingdom",
"company": "Ovolo",
"favoriteNumber": 7
},
{
"id": 1,
"name": "Koch Becker",
"city": "Johnsonburg",
"state": "New Jersey",
"country": "Madagascar",
"company": "Eventage",
"favoriteNumber": 2
},
{
"id": 2,
"name": "Lowery Hopkins",
"city": "Blanco",
"state": "Arizona",
"country": "Ukraine",
"company": "Comtext",
"favoriteNumber": 3
},
];
ReactDOM.render(<RootFrame UrlPost={'Home/SaveData'}/>,
document.getElementById("demoForm"));
基本上,我試圖選擇一行,同時能夠更改名稱並單擊提交。
從網格中選擇的行
在“名稱”字段中,用戶可以更改名稱。
您的輸入不起作用,因為您要為輸入設置靜態值this.props.Name
。 為了編輯您的輸入並仍然使用this.props.Name
設置初始值,您應該使用state
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = { formName : '', inputName: ''}
this.handleFormName = this.handleFormName.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
this.setState({inputName: this.props.Name});
}
handleFormName(e) {
console.log(e.target.value);
this.setState({ formName: e.target.value });
}
handleSubmit(event) {
console.log(this.state.formName);
this.setState({inputName: event.target.value});
axios.post(this.props.UrlPost, { FirstName: this.state.formName })
.then(function (response) {
});
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.inputName} onChange={this.handleFormName.bind(this)} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.