[英]I can't set state from react component value
我正在嘗試在下面更新 values.answerB 中的 state。
When I try and write an updateState function in Input.js, I can't get my head around how to grab the input value and update the values.answerB state in the state object.
我究竟做錯了什么?
UserForm.js 文件
state = {
step: 1,
values: [
{
section: "summary",
answers:
{
answerA: 1,
answerB: 13,
answerC: 6
}
},
{
section: "players",
answers:
{
answerE: 15,
answerF: 132,
answerG: 63
}
}
]
}
switch (step) {
default:
return (
<Start />
);
}
啟動.js 文件
render() {
const { values } = this.props;
return (
<Input
label={'Player name'}
value={ values.answerB }
/>
)
}
輸入.js 文件
export class Input extends Component {
// PROBLEM UPDATING THE STATE HERE!!
updateState = e => {
this.setState({ [input]: e.target.value });
};
render() {
return (
<input class="bootstrap-sample-class"
min="0"
type="number"
onChange={this.updateState}
/>
)
}
}
export default Input;
export class Input extends Component {
// PROBLEM UPDATING THE STATE HERE!!
updateState = e => {
this.setState({ values[0].answers.answerB });
};
render() {
return (
<input class="bootstrap-sample-class"
min="0"
type="number"
onChange={this.updateState}
/>
)
}
}
export default Input;
您的updateState
應該在 UserForm 組件中,並作為道具傳遞給Input
組件。
updateState = e => {
// [input] input here was neither declared nor initialized with any value
this.setState({ [input]: e.target.value });
};
UserForm.js 文件
state = {
step: 1,
values: [
{
section: "summary",
answers:
{
answerA: 1,
answerB: 13,
answerC: 6
}
},
{
section: "players",
answers:
{
answerE: 15,
answerF: 132,
answerG: 63
}
}
]
}
switch (step) {
default:
return (
<Start />
);
}
UserForm.js 文件
state = {
step: 1,
values: [
{
section: "summary",
answers:
{
answerA: 1,
answerB: 13,
answerC: 6
}
},
{
section: "players",
answers:
{
answerE: 15,
answerF: 132,
answerG: 63
}
}
]
}
updateState =(e,input) => { // <=== changes
this.setState({ [input]: e.target.value });
};
switch (step) {
default:
return (
<Start update={this.updateState}/> // changes
);
}
嘗試在 UserFrom.js 中使用 onchange
用戶窗體.js
state = {
step: 1,
values: [
{
section: "summary",
answers:
{
answerA: 1,
answerB: 13,
answerC: 6
}
},
{
section: "players",
answers:
{
answerE: 15,
answerF: 132,
answerG: 63
}
}
]
}
updateState = e => {
let data=[...this.state.values]
let copstate=[...data,{...this.state.values[answers],answerB: e.target.value}]
this.setState({ values: copstate});
};
switch (step) {
default:
return (
<Start changed={(e)=>updateState(e)}/>
);
}
啟動.js
render() {
const { values } = this.props;
return (
<Input
label={'Player name'}
value={ values.answerB }
changed={props.changed}
/>
)
}
輸入.js 文件
export class Input extends Component {
// PROBLEM UPDATING THE STATE HERE!!
render() {
return (
<input class="bootstrap-sample-class"
min="0"
type="number"
onChange={props.changed}
/>
)
}
}
export default Input;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.