使用默认值编辑反应种子设定中的输入字段

Question

我有一个引导模式，用户应该在其中编辑他在表中输入的内容。当我使用静态getDerivedStateFromProps设置状态时，用户无法修改输入框，但是当我使用一些任意数据手动初始化状态时，用户可以修改它。 我做错了什么？

该组件正在从 Redux 获取其道具。

export default class EditItem extends Component {
constructor(props) {
super(props);
this.state = {
name: ""
};
}
handleChange = (event) => {
let { value, name } = event.target;
this.setState({
[name]: value
})
}

static getDerivedStateFromProps(nextProps, prevState){
return {
name: nextProps.itemDetails.name
}
}
render() {
let {
} = this.state;
let {itemDetails} = this.props
return (
<div id="myModal3" className="modal fade">
<div id={uuidv1()} className="modal-dialog">
<div id={uuidv1()} className="modal-content">
<div id={uuidv1()} className="modal-body">
<form id={uuidv1()} className="form-horizontal form-material">
{this.props.cat_name}
<div id={uuidv1()} className="form-group">
<label id={uuidv1()} className="col-md-8">
Item Name
</label>
<div id={uuidv1()} className="col-md-8">
<input
id={uuidv1()}
onChange={this.handleChange}
value={this.state.name}
name="name"
type="text"
placeholder="ex. Burrito"
className="form-control form-control-line"
/>
</div>
</div>

</form>
</div>
</div>
</div>
</div>
);
}
}

Answer 1

使用getDrivesStateToProps不是一个好的选择。你有道具，为什么不直接用呢？您可以在此处查看更多解释。

将初始状态设置为道具：

class App extends React.Component {
constructor( props ) {
super( props );
this.state = {
name: this.props.itemDetails.name,
};
}
handleChange = ( event ) => {
const { value, name } = event.target;
this.setState( {
[ name ]: value,
} );
};
render() {
let { } = this.state;
const { itemDetails } = this.props;
console.log( this.state );
return (
<div>
<div>
<div>
<div>
<form>
{this.props.cat_name}
<div>
<label>Item Name</label>
<div>
<input
onChange={this.handleChange}
value={this.state.name}
name="name"
type="text"
placeholder="ex. Burrito"
className="form-control form-control-line"
/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
);
}
}
const itemDetails = { name: "foo" };
ReactDOM.render(<App itemDetails={itemDetails}/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

如果你的道具来自异步操作，我不知道也许你可以使用这样的东西只是为了安全

起见：

this.state = {
name: ( this.props.itemDetails && this.props.itemDetails.name ) || "",
};

也许有更好的方法 ̄(°_o(/̄