时间戳

首页 > 解决方案 > 在 react js 中启用按钮后如何聚焦？

javascript - 在 react js 中启用按钮后如何聚焦？

问题描述

我是反应 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>

以上是一些示例代码，我正在尝试关注登录按钮

标签： javascripthtmlcssreactjsmaterial-ui

解决方案

您可以使用 react 提供的 Ref 来引用任何 HTML 元素，稍后您可以使用它的 current 属性访问它。

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>
  );
}

推荐阅读