如何解决用户输入未正确影响边框半径
我的目标是创建一个边界半径预览器,用户可以在其中定义边界半径的影响。当我尝试输入时,输入值不会发生任何事情。当我删除键入的值时,默认值更改将消失。
我试图修改代码,并尝试搜索其他问题和答案,但没有找到解决方法。
import React from 'react';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
topleft: 30,topright: 30,bottomright: 30,bottomleft: 30
}
}
handleChange = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: val});
}
render() {
const borderStyle = {
borderRadius: this.state.topleft,background: "#73AD21",padding: "20px",width: "200px",height: "150px",}
return (
<div className="App">
<h1>Border-Radius Previewer</h1>
<p style={borderStyle}>Box</p>
<p>Border-Radius Values:</p>
<input type="number" name="topleft" onChange={this.handleChange} />
<input type="number" name="topright" onChange={this.handleChange} />
<input type="number" name="bottomright" onChange={this.handleChange} />
<input type="number" name="bottomleft" onChange={this.handleChange} />
</div>
);
}
}
export default App;
解决方法
内联样式无法识别
带编号的字符串。 borderRadius:“ 100”没有任何意义 你应该写 borderRadius:“ 100px”或borderRadius:100
您可以简单地更新handleChange函数以仅保留数字作为状态值。
更新代码
import React from 'react';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
topleft: 30,topright: 30,bottomright: 30,bottomleft: 30
}
}
handleChange = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: Number(val)});
}
render() {
const borderStyle = {
borderRadius: this.state.topleft,background: "#73AD21",padding: "20px",width: "200px",height: "150px",}
return (
<div className="App">
<h1>Border-Radius Previewer</h1>
<p style={borderStyle}>Box</p>
<p>Border-Radius Values:</p>
<input type="number" name="topleft" onChange={this.handleChange} />
<input type="number" name="topright" onChange={this.handleChange} />
<input type="number" name="bottomright" onChange={this.handleChange} />
<input type="number" name="bottomleft" onChange={this.handleChange} />
</div>
);
}
}
export default App;
,
我假设您想将topleft
,topright
,bottomright
和bottomleft
状态应用为borderRadius
—您可以使用string interpolation来附加在每个值上px
。
const { topleft,topright,bottomright,bottomleft } = this.state;
const borderStyle = {
borderRadius: `${topleft}px ${topright}px ${bottomright}px ${bottomleft}px`,height: "150px"
};
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="app_root"></div>
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
topleft: 30,bottomleft: 30
};
}
handleChange = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({ [nam]: val });
};
render() {
const { topleft,bottomleft } = this.state;
const borderStyle = {
borderRadius: `${topleft}px ${topright}px ${bottomright}px ${bottomleft}px`,height: "150px"
};
return (
<div className="App">
<h1>Border-Radius Previewer</h1>
<p style={borderStyle}>Box</p>
<p>Border-Radius Values:</p>
<input type="number" name="topleft" onChange={this.handleChange} />
<input type="number" name="topright" onChange={this.handleChange} />
<input type="number" name="bottomright" onChange={this.handleChange} />
<input type="number" name="bottomleft" onChange={this.handleChange} />
</div>
);
}
}
ReactDOM.render(<App />,document.getElementById("app_root"));
</script>
,
所以兄弟,您要做的就是在设置状态时在状态后附加一个字符串,这就是'px'的添加方式。完整代码
class App extends Component {
constructor(props) {
super(props)
this.state = {
topleft: '30px',topright: '30px',bottomright: '30px',bottomleft: '30px'
}
}
handleChange = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: val+'px'});
}
render() {
console.log(this.state.topleft);
const borderStyle = {
borderRadius: this.state.topleft,}
return (
<div className="App">
<h1>Border-Radius Previewer</h1>
<p style={borderStyle}>Box</p>
<p>Border-Radius Values:</p>
<input type="string" name="topleft" onChange={this.handleChange} />
<input type="string" name="topright" onChange={this.handleChange} />
<input type="string" name="bottomright" onChange={this.handleChange} />
<input type="string" name="bottomleft" onChange={this.handleChange} />
</div>
);
}
}
导出默认应用;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。