问题描述
我是新来响应js的人，我想在完成所有输入字段后将注意力集中在按钮上，此后，我以编程方式启用了该按钮，但我无法专注于该按钮。我还在实现中使用了autoFocus
return (
<div style={{ marginTop: '10%',marginLeft: '25%',backgroundImage: 'linear-gradient(to right,rgba(153,102,255,1),0.5))',color: '#f3f5f7',height: 'fit-content%',width: '50%',paddingBlockStart: '50px',position: 'fixed' }}>
<form align="center" >
<h1 align="center"> Login</h1><br /><br />
<Grid container direction="row" justify="center" alignItems="center" spacing={4} >
<Grid item >
<TextField input type="number" placeholder={this.props.intl.formatMessage(messages.PlaceHolder)} id="mobileNo" variant="outlined" size="small" required style={{ backgroundColor: 'white',width: '300px',borderRadius: '5px',border: '1px solid' }} onInput={(e) => { e.target.value = Math.max(0,parseInt(e.target.value)).toString().slice(0,11) }} />
</Grid>
<Grid item >
<MyButton disabled={this.state.validate} variant="outlined" color="primary" onClick={() => this.clickValidate()}> {this.props.intl.formatMessage(messages.ValidateButton)} </MyButton>
<ToastContainer />
</Grid>
</Grid>
<br /><br />
<Grid container direction="row" justify="center" alignItems="center" spacing={4} >
<Grid item >
<ValidationTextField type="number" onInput={this.restrictAlphabets} min={0} required id="otp_1" variant="outlined" size="small" onChange={this.handleChange} inputProps={{ maxLength: 1,size: 1 }} style={{ backgroundColor: 'white',width: '50px',border: '1px solid' }} />
</Grid>
<Grid item >
<ValidationTextField type="number" onInput={this.restrictAlphabets} min={0} required id="otp_2" variant="outlined" size="small" onChange={this.handleChange} inputProps={{ maxLength: 1,border: '1px solid' }} />
</Grid>
<Grid item >
<ValidationTextField type="number" onInput={this.restrictAlphabets} min={0} required id="otp_3" variant="outlined" size="small" onChange={this.handleChange} inputProps={{ maxLength: 1,border: '1px solid' }} />
</Grid>
<Grid item >
<ValidationTextField type="number" onInput={this.restrictAlphabets} min={0} required id="otp_4" variant="outlined" size="small" onChange={this.handleChange} inputProps={{ maxLength: 1,border: '1px solid' }} />
</Grid>
<Grid item >
<ValidationTextField type="number" onInput={this.restrictAlphabets} min={0} required id="otp_5" variant="outlined" size="small" onChange={this.handleChange} inputProps={{ maxLength: 1,border: '1px solid' }} />
</Grid>
<Grid item >
<ValidationTextField type="number" onInput={this.restrictAlphabets} min={0} required id="otp_6" variant="outlined" size="small" onChange={this.handleChange} inputProps={{ maxLength: 1,border: '1px solid' }} />
</Grid>
</Grid>
<br /><br /><br />
<MyButton id="login" variant="outlined" aria-disabled={this.state.login} color="primary" onClick={this.handelLogin}> {this.props.intl.formatMessage(messages.Login)} </MyButton>
<br /><br /><br />
<Link style={{ color: 'white' }} onClick={this.handelResendOtp}> {this.props.intl.formatMessage(messages.ResendOtp)} </Link>
<br /><br /><br />
</form>
<div id="regalert" style={this.state.unregistered ? {} : { display: 'none' }}>
<Alert severity="info"><h3>You are not registered with us,kindly visit www.agoraservices.us for registration!</h3></Alert >
</div>
</div>
解决方法
您可以使用react提供的Ref来引用任何HTML元素，稍后您可以使用其当前属性来访问它。
https://codesandbox.io/s/friendly-neumann-07wdi?file=/src/App.js
function App() {
const mybtnRef = useRef();
React.useEffect(() => {
mybtnRef.current.focus();
},[]);
return (
<div className="App">
<button ref={mybtnRef} onClick={()=>console.log("hello")}>Click here</button>
</div>
);
}
<!-- you can take reference from my code of focus or changing background color as well-->
<html>
<head>
<style>
td {
border: 1px solid #ddd;
padding: 10px;
}
td:first-child {
width: 300px;
}
</style> </head>
<body>
<div id="message">some text here</div>
<div>
<input type="text" id="addFriend">
<input type="button" id="addNew" value="Add Friend"> </div>
<div class="output"></div>
<script>
<!-- array calling for listout -->
var myArray = ["Laurence","Mike","John","Larry","Kim","Joanne","Lisa","Janet","Jane"];
window.onload = build;
document.getElementById('addNew').addEventListener('click',addN,false);
function addN() {
var a = document.getElementById('addFriend').value;
myArray.push(a);
build();
}
function build() {
var html = "<h1>Click Table</h1><table>";
for (var x = 0; x < myArray.length; x++) {
html += '<tr id="id' + x + '" data-row="' + x + '"><td>' + myArray[x] + '</td><td><a href="#" data-action="delete">Del</a></td><td><a href="#" data-action="edit">Edit</a></td></tr>';
}
document.querySelector('.output').innerHTML = html;
var dad = document.querySelectorAll('[data-action="delete"]');
for (var x = 0; x < dad.length; x++) {
dad[x].addEventListener('click',function () {
event.preventDefault();
var iValue = this.closest('[data-row]').getAttribute('data-row');
var r = myArray.splice(iValue,1);
build();
console.log(r);
})
}
var dae = document.querySelectorAll('[data-action="edit"]');
for (var x = 0; x < dae.length; x++) {
dae[x].addEventListener('click',function () {
event.preventDefault();
var row = this.closest('[data-row]');
var rid = row.getAttribute('data-row');
row.style.backgroundColor = "Yellow";
var td = row.firstElementChild;
var input = document.createElement('input');
input.type = "text";
input.value = td.innerText;
td.innerHTML = "";
td.appendChild(input);
input.focus();
input.onblur = function () {
td.removeChild(input);
td.innerHTML = input.value;
myArray[rid] = input.value;
row.style.backgroundColor = "White"
}
})
}
console.log(dad);
}
</script> </body>
</html>