[英]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.