Question

随着组件状态的变化，我试图更改输入的name属性。
简而言之，这就是我想要做的。

 let displayInputElement = (
  <input
    type="text"
    name = {pips}
    placeholder="Type your answer here"
    className=" form-control"
  />
);



 displayInputElement.props.name = "chicken";

但是我遇到了以下错误

TypeError：无法分配为只读对象“＃”的属性“ name”

请问我该如何实现以下目标

displayInputElement.props.name = "chicken";
let pips = displayInputElement.props.name;

displayInputElement = (
  <input
    type="text"
    name = "chicken"
    placeholder="Type your answer here"
    className=" form-control"
  />
);

Answer 1

道具是只读的。

您可以使用名称prop创建一个新变量，然后更改该变量，或者使用回调来更新可以传递给该组件的父组件的属性。

let newName = displayInputElement.props.name;
newName = "chicken";

或者类似这样的东西：

this.state = {
  name: this.props.name;
}

this.setState({
 name: "chicken";
}), () => {
  callbackToParent(this.state.name);
}

Answer 2

我认为您应该将displayInputElement作为组件，以便您可以通过props参数传递任何内容

let DisplayInputElement = (props) =>(
  <input
    type="text"
    name = {props.name}
    placeholder="Type your answer here"
    className=" form-control"
  />
);
const state = {
    name:"myrrtle"
}
ReactDOM.render(<DisplayInputElement name={state.name} />, mountNode);

您无法通过编写DisplayInputElement.props.name="chicken"来设置道具，因为道具是可以阅读的。我只是以示例状态来说明我的意思。希望对您有帮助。

ReactJs TypeError：无法分配为只读对象“＃<object>”的属性“ name”

2 个答案: