1
私は、訪問者が入力内容をすぐに見られる入力フォームを構築していますが、画面幅のサイズを変更しようとしたときに多くのテキストを入力しようとすると、画面幅が小さい場合はXが表示されます。言い換えれば、私はそれをどのように反応的にすることができますか？あなたの<h4>タグにword-wrap: break-wordを追加する必要がReactJSのonChangeテキストの対応方法
import React from "react";
export default class Form extends React.Component {
\t constructor(props) {
\t \t super(props);
\t \t this.state = {
\t \t \t data: null,
\t \t \t header: "Please enter something in this input field and see what happens :)"
\t \t }
\t \t this.updateState = this.updateState.bind(this);
\t
\t };
\t updateState(e) {
\t \t this.setState({data: e.target.value});
\t }
render() {
\t var myStyle = {
\t \t padding: 30,
\t \t color: "black",
\t \t display: "block",
\t \t backgroundColor: "#e2f7fd",
\t \t marginTop: 10
\t }
return (
<div style= {myStyle}>
\t <h1>{this.state.header}</h1>
<input type = "text" value = {this.state.data}
onChange = {this.updateState} />
<h4>{this.state.data}</h4>
</div>
);
}
}<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>