#javascript #html #css #reactjs #material-ui
#javascript #HTML #css #reactjs #материал-пользовательский интерфейс
Вопрос:
Я новичок в react js и пытаюсь сосредоточиться на кнопке после заполнения всех полей ввода, после этого я включаю эту кнопку программно, но я не могу сосредоточиться на ней. Я также использую автофокусировку в ее реализации
return (
<div style={{ marginTop: '10%', marginLeft: '25%', backgroundImage: 'linear-gradient(to right, rgba(153,102,255,1), rgba(153,102,255,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', borderRadius: '5px', 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, size: 1 }} style={{ backgroundColor: 'white', width: '50px', borderRadius: '5px', 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, size: 1 }} style={{ backgroundColor: 'white', width: '50px', borderRadius: '5px', 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, size: 1 }} style={{ backgroundColor: 'white', width: '50px', borderRadius: '5px', 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, size: 1 }} style={{ backgroundColor: 'white', width: '50px', borderRadius: '5px', 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, size: 1 }} style={{ backgroundColor: 'white', width: '50px', borderRadius: '5px', 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>
выше приведен некоторый пример кода, и я пытаюсь сосредоточиться на кнопке входа
Комментарии:
1. Документы react по ссылкам , вероятно, являются хорошим местом для начала; в их примере даже программно устанавливается фокус на элементе.
Ответ №1:
Вы можете использовать ссылку, предоставленную react, для ссылки на любой 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>
);
}
Комментарии:
1. Что, если я также захочу отключить ее, если поля ввода пусты? и если не пусто, то включите эту кнопку и одновременно сфокусируйтесь на ней?
2. Все это можно сделать с помощью этого . У вас должен быть обработчик событий в поле ввода, затем в thevenethandler проверьте их значение, является ли оно пустым или нет. На основе этого вызывается mybtn.current.focus.
3. Я также хочу отключить ее на некоторое время
4. Да, просто установите mybtnRef.current.disabled = true;
5. Не могли бы вы, пожалуйста, отметить это как ответ, другие могут счесть это полезным.
Ответ №2:
<!-- 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>