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>