基于选中的复选框呈现属性
基于选中的复选框呈现属性
提问于 2018-10-18 03:38:44
我已经在CodeSandBox的评论中解释了这些问题。基本上，我有一个用复选框呈现的field.names数组。当每个框被选中时，用户应该能够输入lengthType和size的单独值。到目前为止，每个选中的框都应用了相同的值。
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
fields: ["action", "callee", "caller", "duration", "message"],
fieldNames: [],
size: [],
lengthType: []
};
}
fieldNamesChanged = newFieldNames => {
console.log(newFieldNames);
this.setState({ fieldNames: newFieldNames });
};
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
console.log([e.target.name])
}
updateLengthType = (e) => {
this.setState({ lengthType: e.target.value });
console.log(this.state.lengthType)
}
handleChange = event => {
const schema = this.state.schemas.find(
schema => schema.name === event.target.value
);
if (schema) {
axios({
method: "get",
url: `${schema.selfUri}`,
headers: { Accept: " " }
})
.then(response => {
console.log(response);
this.setState({
fields: response.data.data.fields,
selectedId: response.data.data.id
});
console.log(this.state.selectedId);
console.log(this.state.fields);
})
.catch(error => console.log(error.response));
}
};来自api调用并将fields.name呈现为复选框值的字段数组响应的示例
"fields": [
{
"name": "action",
"dataType": "string",
},
{
"name": "callee",
"dataType": "string",
},
{
"name": "caller",
"dataType": "string",
},
{
"name": "duration",
"dataType": "double",
},
{
"name": "message",
"dataType": "string",
},
]
render() {
const { fields, fieldNames } = this.state;
return (
<div className="App">
<h1>Checkbox Group</h1>
<div>
<fieldset>
<legend>Choose field names</legend>
<br />
<CheckboxGroup
checkboxDepth={5}
name="fieldNames"
value={this.state.fieldNames}
onChange={this.fieldNamesChanged}
>
{fields &&
fields.map(field => {
return (
<label>
<Checkbox value={field} />
{field}
</label>
);
})}
<br />
</CheckboxGroup>
<label>Length Type:</label>
<select
value={this.state.lengthType}
onChange={this.updateLengthType}
required
>
<option value="">Select Length Type...</option>
<option value="fixed">Fixed</option>
<option value="variable">Variable</option>
</select>
<br />
<label>Size:</label>
<input
value={this.state.size}
onChange={this.onChange}
type="number"
name="size"
placeholder="1"
min="0"
required
/>
<br />
</fieldset>
</div>
</div>
);
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-18 04:17:26
我发现的几个问题
- 我看不到任何用于处理大小输入的
onChange函数。在constructor - Provide key props for
components中未定义
- 初始大小状态
=====================
更新
我创建了一个示例
https://codesandbox.io/s/kkxv3nl7n5
我不太确定这是否是你想要做的。查看我的沙箱链接并检查它是否是您正在尝试做的事情。
我认为如果复选框被选中，那么应该会显示上次选中的lengthType, size values复选框。因此，您的对象状态应该是 size, lengthType 。因为它将保存每个fieldName的大小和长度类型。所以我把它改成了下面这样。
onChange = e => {
e.persist();
const { fieldNames } = this.state;
const lastCheckedFieldName = fieldNames[fieldNames.length - 1];
this.setState(prevState => {
return {
size: {
...prevState.size,
[lastCheckedFieldName]: e.target.value
}
};
});
};在render函数中，您的输入值引用了this.state.size，我一点也不理解这一点，因为您说要为每个字段指定单独的大小。这应该是动态地引用一个对象或数组，该对象或数组具有一个键，该键可能由状态确定，以便将每个字段的值分开。
const lastCheckedFieldName = fieldNames[fieldNames.length - 1];
<input
value={this.state.size[lastCheckedFieldName] || 1}
onChange={this.onChange}
type="number"
name="size"
placeholder="1"
min="0"
required
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52862422
复制相关文章
相似问题
腾讯云开发者
