0
在连接到这个职位的片段时，不需要高度的变化，我想，当用户点击一个div来呈现input标签。该输入具有取div的地方，从而避免给予用户的任何暗示该组件被改变（如editablecell属性）。阵营 - 渲染输入字段
当输入被渲染，我遇到的eleme
const styles = {
cell: {
width: "200px",
border: "1px solid black",
lineHeight: "30px",
textAlign: "center",
verticalAlign: "middle"
},
input: {
width: "200px"
}
};
const text = "Click on me";
class App extends React.Component {
state = {
active: false
};
handleClick =() => {
this.setState(prevState => {
return {
active: !prevState.active
};
});
};
handleKeyPress = evt => {
if (evt.charCode === 13) {
this.setState(prevState => {
return {
active: !prevState.active
};
});
}
};
render() {
if (this.state.active) {
return (
<div>
<input
type="text"
style={styles.cell}
onKeyPress={this.handleKeyPress}
placeholder="Press ENTER when done"
/>
<p>Notice how the height is changing</p>
</div>
);
} else {
return (
<div>
<div style={styles.cell} onClick={this.handleClick}>
{text}
</div>
<p>Notice how the height is changing</p>
</div>
);
}
}
}
ReactDOM.render(<App />, 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>