例:codepen
var InputBox = React.createClass({
render: function() {
return (
<input className="mainInput" value='Some something'></input>
)
}
});
例:codepen
var InputBox = React.createClass({
render: function() {
return (
<input className="mainInput" value='Some something'></input>
)
}
});
回答:
Functional component
:const handleFocus = (event) => event.target.select();
const Input = (props) => <input type="text" value="Some something" onFocus={handleFocus} />
ES6 class component
:class Input extends React.Component {
handleFocus = (event) => event.target.select();
render() {
return (
<input type="text" value="Some something" onFocus={this.handleFocus} />
);
}
}
React.createClass
:React.createClass({
handleFocus: function(event) {
event.target.select();
},
render: function() {
return (
<input type="text" value="Some something" onFocus={this.handleFocus} />
);
},
})
<input type='text' value='Some something' onFocus={e => e.target.select()} />
disabled
テキストボックスで機能させるにはどうすればよいですか?jsfiddle.net/69z2wepo/317733
var InputBox = React.createClass({
getInitialState(){
return {
text: ''
};
},
render: function () {
return (
<input
ref="input"
className="mainInput"
placeholder='Text'
value={this.state.text}
onChange={(e)=>{this.setState({text:e.target.value});}}
onFocus={()=>{this.refs.input.select()}}
/>
)
}
});
入力にrefを設定する必要があり、フォーカスされている場合はselect()を使用する必要があります。
ありがとう、感謝します。私はそうしました:
var input = self.refs.value.getDOMNode();
input.focus();
input.setSelectionRange(0, input.value.length);
私の場合、入力がモーダルに表示された後、最初からテキストを選択したいと思いました。
componentDidMount: function() {
this.refs.copy.select();
},
<input ref='copy'
var React = require('react');
var Select = React.createClass({
handleFocus: function(event) {
event.target.select()
},
render: function() {
<input type="text" onFocus={this.handleFocus} value={'all of this stuff'} />
}
});
module.exports = Select;
reactクラスの入力内のすべてのコンテンツを自動選択します。入力タグのonFocus属性は、関数を呼び出します。OnFocus関数には、イベントと呼ばれるパラメーターが自動的に生成されます。上記のように、event.target.select()は入力タグのすべてのコンテンツを設定します。
useRefHookを使用した別の方法の機能コンポーネント:
const inputEl = useRef(null);
function handleFocus() {
inputEl.current.select();
}
<input
type="number"
value={quantity}
ref={inputEl}
onChange={e => setQuantityHandler(e.target.value)}
onFocus={handleFocus}
/>